# vue 环境搭建

粗略安装步骤：
1. npm install vue-cli -g
2. vue init webpack vue-demo // vue-demo为项目名
   // 是否需要路由  y
   // 是否需要ESLint检查代码风格  y
   // standant 
   // 单元测试  n
   // text  n
3. cd vue-demo
4. npm install // 安装依赖
5. npm run dev // 运行该项目
sass安装：
1. npm install sass-loader node-sass -D
2. 在app.vue的style中加入lang='sass'；如：<style lang="scss" scoped> </style>
less安装：
1. npm install less-loader less -D
2. 在app.vue的style中加入lang='less'；如：<style lang="less" scoped> </style>

npm install vue-cli -g

$ vue init <template-name> <project-name>

vue init webpack vuecli

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- logo.png                     // Vue的logo
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // 
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量（没有选test则没有）
|-- src                              // 源码目录
|   |-- assets                       // vue公共资源文件
|   |-- components                   // vue公共组件
|   |-- src                          // vue目录文件
|   |-- store                        // vuex的状态管理（未安装vuex则无）
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // 定义代码格式
|-- .slintrc.js                      // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcssrc.js                    // 
|-- index.html                       // 入口页面
|-- package-lock.json                // 
|-- package.json                     // 项目基本信息
|-- README.md                        // 项目说明
.

npm install -g @vue/cli

vue -V // 查看vue版本号是否为 3.x

vue create vue-demo // vue-demo为项目名称

Please pick a preset: (Use arrow keys)
> default (babel, eslint) // 包含基本的Babel + ESLint设置的preset。
  Manually select features // 手动选择特性，是我们所需要的面向生产的项目，提供可选功能的 npm 包。

|- node_modules
|- public
|- src
    |- asserts
    |- components
|-  babel.config.js
|-  package-lock.json
|-  package.json
|-  README.md

{
  "name": "vue-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

* Babel // 将ES6编译成ES5
  TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
  Progressive Web App <PWA> Support // 渐进式Web应用程序
  Router // vue-router（vue路由）
  Vuex // vuex（vue的状态管理模式）
  Css Pre-processors // CSS 预处理器（如：less、sass）
* Linter / Formatter // 代码风格检查和格式化（如：ESlint）
  Unit Testing // 单元测试（unit tests）,开发过程中前端对代码进行自运行测试
  E2E Testing // e2e（end to end） 测试

1. /* 使用路由的历史模式：输入 Y */
Use history mode for router? <Requires proper server setup for index fallback in production> <Y/n>
// 选择: Y
2. /* 选择一个CSS预处理器<PostCSS，Autoprefixer和CSS模块默认支持 */
Pick a CSS pre-processor <PostCSS, Autoprefixer and CSS Modules are supportedby default> <Use arrow keys>
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
// 选择: Sass/SCSS (with node-sass)
3. /* 选择一个linter/formatter配置 */
Pick a linter / formatter config: <Use arrow keys>
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
// 选择: ESLint + Prettier
4. /* 反向选择 */
to invert selection >
> (*) Lint on save
  ( ) Lint and fix on commit
// 选择： Lint on save
5. /* 您希望在哪里放置Babel、PostCSS、ESLint等的配置。？ */
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? <Use arrow keys>
> In dedicated config files
  In package.json
// 选择：In package.json
6. /* 将此保存为将来项目的预设 */
Save this as a preset for future projects? (y/N)
// 选择：N

module.exports = {
    configureWebpack: { // 为设置断点调试准备
        devtool: 'source-map'
    },
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制),例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
    outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
    assetsDir: '', // 放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
    indexPath: 'index.html', // 指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
    pages: { //pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
        index: { //除了 entry 之外都是可选的
            entry: 'src/main.js', // page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
            template: 'public/index.html', // 模板来源
            filename: 'index.html', // 在 dist/index.html 的输出
            title: 'Index Page', // 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
            chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk },
        }
        // subpage: 'src/subpage/main.js' // 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html` 并且如果找不到的话，就回退到 `public/index.html`。输出文件名会被推导为 `subpage.html`。
    },
    lintOnSave: true, // 是否显示eslint语法问题
    devServer: {
        hot: true, // 设置eslint错误得显示为控制台
        clientLogLevel: 'warning',
        // overlay: { // 设置eslint错误得显示方式
        //     warnings: false,
        //     errors: false
        // }
        host: 'localhost',        
        port: 8000,
        https: false,
        hotOnly: false,
        open: true, //配置自动启动浏览器
        // proxy: { // 配置多个代理(配置一个 proxy: 'http://localhost:4000' ) }
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '/foo': {
        //     target: '<other_url>'
        //     }
        // }
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    css: { // css预设器配置项
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps
        loaderOptions: { // 给 sass-loader 传递选项
          sass: {
            prependData: `@import "~@/assets/css/variable.scss";`
          }
        }, 
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    pluginOptions: {} // 第三方插件配置
}

npm i element-ui -S

npm install babel-plugin-component -D

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

css: {
  extract: true, // 是否使用css分离插件 ExtractTextPlugin
  sourceMap: false, // 开启 CSS source maps
  loaderOptions: { // 给 sass-loader 传递选项
    sass: {
      prependData: `@import "~@/assets/css/variable.scss";`
    }
  }, 
  modules: false // 启用 CSS modules for all css / pre-processor files.
}