vue-cli3的安装和使用

vue-cli3的安装和使用

1、在当前文件夹下启动控制台(windows)

2、安装vue-cli
npm i -g @vue/cli

3、创键vue项目
vue create 项目名

注意项目名不能用大写字母

4、选择项目

• 如果没有创建过只有两个选项

default(babel，eslint)			//默认设置
Manually select features		//手动设置

我们选择第二个

下面推荐选的是Babel、Router、Vuex、SS Pre-processors

? 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） 测试

• 是否使用history router
  
  ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

  • Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

  • hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

  • history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持（详细参见：https://router.vuejs.org/zh/guide/essentials/history-mode.html）

  所以这里暂时选择n

• 选择CSS预处理器语言，此处选择dart-sass

• 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择package.json

5、创建vue.config.js

module.exports = {
  //基本路径
  publicPath: './',

  //输出文件目录
  outputDir: 'dist',
  
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',

  css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
    },

  devServer: {
    host: 'localhost',
    open: true, //配置自动启动浏览器
    hotOnly: true, // 热更新
    port: 8092,
    proxy:{
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true, //是否跨域
        pathRewrite: {
        '^/api': '' //规定请求地址以什么作为开头
        }
      }
    }
  },
}

6.启动项目 npm-run-serve