Vue CLi3入门

摘自：https://www.jianshu.com/p/cf9b56efd3b8

Vue CLi3入门

12018.11.15 14:16:17字数 1222阅读 8895

地址

Vue CLi3 github
Vue CLi web

安装

命名方式已经改为npm推荐的作用域规则，详情查看此文章

npm i @vue/cli -g
yarn add @vue/cli global
# 查看版本
vue -V

创建一个项目

vue create clidemoe  # 2.0中 vue init webpack clidemoe

如果版本小于3.0会提示让你升级3.0以上。

 

 

 

 

第一次创建只会有两个选项（default和Manually select features），1和2是我之前创建保存的。
这里我们主要看Manually select features：

首先是特性选择（按空格键选中或取消，a全选，i反选）：

 

 

接着是选择路由是否使用history模式：
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

接着选择使用哪种css预处理器：

 

 

最后选择代码风格等：

 

 

最后会问你是否保存本次选择的配置：

 

 

接着又会问你特性的存放方式：

 

 

最后会问你是否保存本次预设

 

 

最后出现这两行就说明创建完成了：

 

 

创建方式2：

使用图形化vue ui创建项目：

 

 

1. 选择包管理器
2. 选择配置，可以选择默认，也可以自己手动配置（一般手动配置），还可以选择之前配置过的（前提是有保存）
3. 选择功能（插件）
    

   

    
4. 选择配置
    

   

    
5. 如果勾选了保存预设，会有弹框让你输入这次保存的预设名
   创建好了，看看页面
    

   

    

   插件

    

   

    

   依赖

    

   

    

默认启动服务方式：

npm run serve  # 2.0中 npm run dev
npx vue-cli-service serve

对比：
CLi2启动方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，使用的是webpack-dev-server搭的服务
CLi3启动方式是vue-cli-service serve
vue-cli-service serve就是CLi服务，文件位于node_modules@vue\cli-service\bin

目录结构

 

cli2

 

cli3

相较于2.0，3.0的目录结构简单了许多，少了build、config两个目录，安装时自动下载了node_modules，3.0的webpack配置可以在根目录新建一个vue.config.js文件。
Vue CLi3.0删除了config和build文件夹，现在配置webpack只需要在项目的根目录下新建vue.config.js文件

#vue.config.js 完整默认配置
module.exports = {
     // 基本路径
     baseUrl: '/',
     // 输出文件目录
     outputDir: 'dist',
     // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
     assetsDir: '',
     // 以多页模式构建应用程序。
     pages: undefined,
     // eslint-loader 是否在保存的时候检查
     lintOnSave: true,
     // 是否使用包含运行时编译器的Vue核心的构建。
     runtimeCompiler: false,
     // 默认情况下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生产环境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相关配置
     css: {
      // 启用 CSS modules
      modules: false,
      // 是否使用css分离插件
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
     },
     // webpack-dev-server 相关配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相关配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}

浏览器兼容性

在package.json文件里多了一个browserslist字段，这个字段指定了项目兼容到哪些浏览器。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

这个字段会被babel用来确定转义的js特性和需要添加的css前缀。
参考资料：https://www.jianshu.com/p/bd9cb7861b85

插件

vue add eslint
vue add @vue/cli-plugin-eslint

安装后会在src目录下生成一个plugins目录，里面会生成插件的配置文件。

vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。
我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

HTML和静态资源

CSS相关

Vue CLI 项目默认支持PostCss、CSS Modules 和 包含 Sass、Less、stylus在内的预处理器（包还是要安装的，只是不用配置了）。
预处理器：
在创建项目的时候选择预处理器（sass/less/stylus）。如果当时没有选好，内置的webpack任然会被预配置为可以完成所有的处理，你也可以手动安装相应的webpack loader：

npm i sass-loader node-sass -D
npm i less-loader less -D
npm i stylus-loader stylus -D

PostCSS：
Vue CLi默认开启了autoprefixer（自动添加前缀），如果要配置目标浏览器，可使用package.json的browserslist字段，所以开发时只需使用无前缀的css规则即可。

环境变量和模式

VueCLI移除了配置文件目录后，如何自定义配置环境变量和模式？
环境变量：
一般项目中，我们针对不同的开发环境，会配置不同的环境变量，下面这些文件会在不同的环境下被载入：

• .env #在所有环境中载入
• .env.development #在开发环境中被载入
• .env.production #在生产环境中被载入
• .env.local #在所有环境中载入，会被git忽略
• .env.development.local #在开发环境中载入，但会被git忽略
• .env.development.local #在生产环境中载入，但会被git忽略

1. 在根目录下新建两个文件.env.development，.env.production。用这两个文件存放环境变量。

// env.development
NODE_ENV=development
VUE_APP_URL=http://123.com

// env.production
NODE_ENV=production
VUE_APP_URL=http://456.com

变量必须以VUE_APP_开头
被载入的变量将会被vue-cli-service的所有命令、插件、依赖可用。

tips：
为一个特定模式准备的环境文件将会比一般的环境文件拥有更高的优先级。（列如.env.development的优先级比.env高）。

模式：
默认情况写，一个Vue CLi项目有三个模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

每个模式都会将NODE_ENV的值设置为模式的名称——比如在development模式下NODE_ENV的值会被设置为development。
可以在package.json中，通过传递 --mode 选项参数为命令行指定模式。

dev-build："vue-cli-service build --mode development"    #指定模式

案例

//vue.config.js
module.exports = {
  baseUrl: process.env.NODE_ENV !== 'production' ? '/' : '/bl/',
// 这里在webpack配置时判断不同环境下使用不同配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === "development") {
        config.devtool = "source-map";
    } else if (process.env.NODE_ENV === "production") {
        config.devtool = "eval-source-map";
    }
  }
}

如果安装完vue-cli3后，还想用vue-cli2怎么办？这个时候就需要安装一个桥接工具了

npm install -g @vue/cli-init
//安装完后 就还可以使用 vue init 命令
vue init webpack my-demo

 

 

12人点赞