vue-cli 脚手架的配置及其使用

vue-cli 脚手架

• 参考网站：https://cli.vuejs.org/zh/guide/
• npm i @vue/cli -g 或者 yarn global add @vue/cli 下载vue脚手架(一般安装在全局)
• 安装成功后，全局环境下会生成一个 vue的可执行命令， vue --version查看版本号
• 脚手架：帮助我们把webpack等相关配置都处理好，我们只需要基于脚手架快速构建一个项目即可（项目中一定包含webpack的相关设置）

创建并配置脚手架以及其的使用

1. 创建项目：vue create 文件夹名（项目名）
2. 选择预调：
   a. 第一项为曾经的配置好的选项，保留下来的
   b. 第二项为默认设置，包含了babel和eslint;
   c. 第三项为手动选择，可以手动选择自己需要的插件（因为前两项点了确定就可以完成配置，所以下面只展示第三项手动选择）
3. 选择插件配置：
   a. 按上下箭头选择配置，空格键选中,选择完成后，回车键继续，会依次问询你所选插件的配置
4. 选择vue-router是否使用历史路由
5. 选择css预处理语言
6. 选择代码风格和格式校验
7. 选择代码校验方式
   a. 选择方式和第二步（选择预调）相同
8. 设置在哪里保存插件的配置
   a. 第一个选择为创建一个独立文件
   b. 第二个为创建为package.json文件（配置文件，用npm install下载）
9. 选择是否保存为一个将来可复用的preset
   a. 如果选择是，下来就得起一个名字
10. 选择完毕开始安装插件
11. 启动项目：cd + 第一步起的项目名（文件夹名）进入文件夹，然后输入npm run serve 或者 yarn serve 启动项目，会生成如图的地址，将地址输入浏览器的地址栏即可
    脚手架创建的文件夹
    • eslint : 代码校验，校验代码的格式是否正确，规范，控制缩进
    • gitignore : git忽略
    • babel.config.js : 配置es6
    • package.json : 项目配置文件
    • readme.md : 对当前项目进行一个解释
    • vue.config.js : 这个是该项目的配置文件；比如配置webpack，配置跨域都在这里配置
    • yarn.lock : 和package.json有点类似
    • eslintrc.js : eslint配置文件
    • src : 资源文件，咱们代码都是写在这个里面的
    • assets : 静态资源文件，一般放图片和一些css
    • components : 组件，页面的一部分
    • router : 配置的路由
    • store : vuex仓库
    • views : 页面级组件
    • App.vue : 只有一个，所有的组件的入口文件
    • main.js : 是webpack打包的入口文件（可以在main.js配置一些全局的组件，filter过滤器，或指令，全局的路由钩子函数）
    • public : webpack打包之后最后要插入到这个HTML文件中
    • node_moduless : 安装的依赖模块
    • dist : 文件夹是在yarn build 产生的，是上线之前需要把当前整个项目进行打包之后的文件