VUE学习（二）搭建项目（VUE-CLI4.0）

一、安装node.js

二、安装vue-cli4.0

npm install @all/cli -g

查看： vue -V

三、搭建项目

（1）、Vue create + 项目名称 -->创建项目

vue create project-name //文件名 不支持驼峰（含大写字母）

（2）、选择项目配置：(选中回车即可)

• Default 默认配置 （cli2.0或cli3.0）
• Manually select features 手动配置

（3）、选择配置

• 根据你的项目需要来选择配置,空格键是选中与取消，A键是全选

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript                          // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) 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、选择VUE版本（选择2.0）

2、Use class-style component syntax? 【使用类风格的组件语法?】（选择：Y）

3、Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 【使用Babel和TypeScript(现代模式需要，自动检测填充，置换JSX)? 】（选择：Y）

4、Use history mode for router? (Requires proper server setup for index fallback in production)【使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) 】

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

5、Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)【选择一个CSS预处理程序(默认支持PostCSS、Autoprefixer和CSS模块) 】

这里我选择的是sass/SCSS(with node-sass)

6、Pick a linter / formatter config【选择linter / formatter配置】

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

7、 Pick additional lint features 【选择额外的linter功能】

然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

8、 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?【你想让你的配置保存到哪里】

In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

10、Save this as a preset for future projects? 【把它作为未来项目的预置?】

选择： N，毕竟每个项目需要的不一定相同。

四、生成目录结构

五、.加载插件/依赖

(1)当前文件夹位置 cmd 运行 vue ui
(2)选择对应插件/依赖

六、环境配置

配置开发、测试、生产环境

七、项目配置

配置项目
Vue CLI配置官网
Webpack 官网

// vue.config.js
module.exports = {
  devServer: { // 开发调试服务器配置项
    open: true, // npm run serve后自动打开页面
    host: 'localhost',  // 匹配本机IP地址
    // host: '172.0.0.0', 
    port: 8000,  // 开发服务器运行端口号
    compress: true,  // 启用静态资源压缩算法 对所有服务启用gzip压缩
    proxy: {// 代理路径
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:8090', // 代理目标的基础路径
        ws: true, // 启用WebSocket
        changeOrigin: true,
        pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      },
      '/foo': {
        target: 'http://localhost:8090',
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/foo': '' }
      }
    }
  }
}