Vue脚手架搭建及说明

创建vue/cli

1. 创建vue脚手架需要依赖node环境，需要先将node装好，可以直接去官网下载
2. 打开包管理系统（windows+r）输入指令 npm install -g @vue/cli进行全局安装vue脚手架，可能会需要很久的时间
3. 新建一个文件夹，在这个文件夹的地址栏输入“cmd”，打开包管理系统
4. 创建项目 npm create 项目名称，注意项目名称不要大写
5. 创建好项目以后，输入npm run serve启动项目，等到它返回一个网址的时候，复制local的地址在浏览器中打开就行了（还可以通过vscode的集成终端进行操作）
6. 打包项目，输入npm build

这样我们一个相对完整的vue项目的框架就搭好了，之后就可以在里面进行编辑、操作了

---

再来看一看项目中的几个文件夹分别是放什么文件的

1. dist：打包完成的文件夹，里面包含一个css文件夹，一个js文件夹，一个ico图，一个html文件
2. node_modules：依赖项，我们如果需要将项目发给别人是不需要将这个文件夹发给别人的，因为这个文件夹有上万个文件在里面。另外，如果别人将一个vue项目发给你，那么你要在这个文件夹中打开包管理系统或者通过vscode打开集成终端，输入npm install进行安装依赖项，之后就可以正常使用别人的vue项目了
3. public：存放html文件，一般只有一个index.html
4. src：编写文件，我们进行的操作主要就在这个文件夹里
5. 其他外部文件为配置文件

---

在src中，

1. assets：是静态资源文件夹，可以放css和图片等静态资源
2. components：公共组件
3. router：配置路由
4. store：vuex
5. views：视图组件，里面放vue文件，就是我们创建的各个组件，这里是我们主要操作的文件夹
6. App.vue：主组件
7. main.js: 主js文件/主配置文件

---

小技巧

1. 给routerlink标签添加事件不管用的话，需要使用修饰符.native
2. vue初始化页面出现闪动
   首先在css文件中，加上[v-cloak]{display:none;}
   没有作用的话在根元素标签加上style=“display：none；” :display：“{display：‘block’}”

再见

时间不多了，得抓紧学习，下次再分享