vue-cli3 创建项目 与初始配置

一 创建项目相关

1 安装node.js(官网）

2 npm install -g @vue/cli

3 vue create pro-name

4选择配置（按 空格 选中）

1. 1. Manually select features （自定义配置）
   2.  Babel (必选)
   3. TypeScript（项目中使用ts开发的话，就勾选）
   4. Progressive Web App (PWA) Support (接口缓存，优化项目)
   5. Router
   6. Vuex
   7. CSS Pre-processors (css预处理器，需要)
   8. Linter / Formatter (代码格式，一般默认选中)
   9. Unit Testing (代码测试)
   10. E2E Testing（需求界面测试）

5  history router，其实直白来说就是是否路径带 # 号，建议选择 N

6  css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

7选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

8 选择什么时候进行代码校验，Lint on save 保存就检查

       9In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，本着项目结构简单的想法，我选择了第二个

      10 是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

      11   npm run serve (运行）

      12 npm run build（打包）

二  配置文件相关

 1 文件路径别名

• 项目文件 新建 vue.config.js
• 内容参考 

module.exports = {
configureWebpack: {
resolve: {
alias: {
// @代表src
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'views': '@/views',
}
}
}

router不需要配置别名  因为 各个文件都可以根据this.$router 拿到router

  2 引用css文件

　　1 在base.css中引入normalize.css

        2 在app.vue中引用base.css

<style scoped>

  @import '~@/assets/css/base.css';

</style>

  3  统一各个浏览器显示的css文件

    https://necolas.github.io/normalize.css/latest/normalize.css  右键保存  引入即可

4 vue-cli中关闭代码检测

    1  vue.config.js

     2  lintOnSave: false

    3 重新编译即可

5 文件编码风格

  .editorconfig(很重要 ，统一风格）

三  项目目录结构划分