Web前端开发必看，Vue快速入门（附实战小项目，跳槽字节跳动_web前端项目

11. package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

12. package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

13. README.md：项目的说明文件。

14. webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

15. .babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

16. .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

17. .postcssrc.js:前缀的配置 （css转化的配置）

18. .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格…（建议定义这个规范）

19. .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

20. .eslintignore:忽略eslint对项目某些文件的语法规则的检查

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev （npm run start）运行项目

五、Vue核心指令

---

Vue导入

或

1、插值表达式

指令：{ { }}

{ { msg }}

{ {message}}

---

{ {student}}

---

{ {student.name}}

---

{ {school[0]}}

---

{ {school}}

2、v-text

设置标签的文本值（textContent）

{ {message+“very good”}}

3、v-html

设置标签的innerHTML，内容中有html结构会被解析为标签

4、v-on

为元素绑定事件

<input type=“button” value=“单击简写” @click=“clicktest”>

---

传递自定义参数，事件修饰符

<input type=“button” value=“单击简写” @click=“clicktest(‘Java’)”>

…

methods: {

clicktest: function (p1) {

this.message = p1 + “已经被修改” + this.count++

}

5、计数器实战

<button @click=“sub”>-

{ {count}}

<button @click=“add”>+

6、v-show

根据表达式的真假，切换元素的显示和隐藏

<button @click=“changee”>步尔斯特

{ {message}}

7、v-if

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）

<button @click=“changee”>步尔斯特

{ {message}}

8、v-bind

设置元素属性

<button @click=“changee”>步尔斯特

9、v-for

根据数据生成列表结构，经常和数组结合使用

• { {index}} -> { {item}}

• { {item.name}}

  10、v-model

  获取和设置表单元素的值

  <input type=“text” v-model=“message” @keyup.enter=“getM”>

  { {message}}