vue-cli3.0 初体验

官方介绍:

介绍

安装

# 1.旧版本
Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli`(1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。
# Node 版本要求
Vue CLI 需要 [Node.js](https://nodejs.org/) 8.9 或更高版本 (推荐 8.11.0+)。

# 可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 检查其版本
vue --version
vue -V

# 查看当前已安装版本、查看最新版本
vue --version
vue -V
# npm 查看模块全部版本：
npm show @vue/cli
npm show @vue/cli versions
npm info @vue/cli versions
npm view @vue/cli versions
# 安装指定版本:
npm install -g @vue/cli
npm install -g @vue/cli@3.7.0

创建项目:

1.命令行创建

vue create my-vue-cli3

2.选择模板

• 一开始只有两个选项: default (默认配置)和 Manually select features (手动配置)
• 在每次选择手动配置之后，会询问你是否保存配置，保存后，以后我们在进行创建项目的时候 只需使用原先的配置 就可以了，而不用再进行配置。

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

这里选手动

3.选择配置

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
>(*) Babel
 ( ) TypeScript  // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support  // PWA 支持
 (*) Router      // 支持 vue-router
 (*) Vuex        // 支持 vuex
 (*) CSS Pre-processors  // 支持 CSS 预处理器。
 (*) Linter / Formatter  // 支持代码风格检查和格式化
 ( ) Unit Testing  // 支持单元测试
 (*) E2E Testing

• 选择：Babel+Router+Vuex+CSS Pre-processors+Linter / Formatter+Unit Testing

4.是否使用路由的 history 模式

• 这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
• 选yes的话需要服务器那边再进行设置。

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
// 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

选择: no

5.选择css预处理器

• 如果你选择了Css预处理器选项，会让你选择这个

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
// 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择: Less

6.选择Eslint代码验证规则

选择Eslint代码验证规则：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

ESLint + Standard config 或 默认

7.选择什么时候进行代码规则检测

• 建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。
• 之前写了篇 VsCode保存时自动修复Eslint错误 推荐一下。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  // 保存就检测
 ( ) Lint and fix on commit // fix和commit时候检查

8.选择e2e测试

单元测试

e2e测试

? Pick a E2E testing solution:
> Cypress (Chrome only)
  Nightwatch (Selenium-based)

9.把babel,postcss,eslint这些配置文件放哪

• 通常我们会选择独立放置，让package.json干净些

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

10.是否保存配置

? Save this as a preset for future projects? (y/N) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了

1. 下载依赖
2. webpack配置的目录不见了：

会发现2.x的webpack配置的目录不见了，也就是没有build、config这两个文件夹了：

这种方式的优势 对小白来说非常友好 ，不会一上来就两个文件夹，一堆文件，看着脑袋都大了。

然后在 引用 抄 别人的配置的时候，也非常方便 ，直接将文件复制过来就好了。

在自定义一下webpack的配置，我们需要在 根目录新建一个 vue.config.js 文件 ，文件中应该导出一个对象，然后进行配置

// vue.config.js
 module.exports = {
 // 选项...
 }

还有一些小变动像：static文件夹改为public了，router文件夹变成了单个文件之类的

11.使用哪种包管理工具

? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM

启动项目：

启动项目：npm run serve // 不是之前的 npm run dev

vue-cli不再纠结devDependencies与dependencies

• 以前一直在纠结一个npm安装的包依赖管理的问题。是这样的：

  我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：

  –save-dev 或 –save

  首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思，而dev则是develop（开发）的简写。

  所以它们的区别在 package.json 文件里面体现出来的就是，使用 –save-dev 安装的 插件，被写入到 devDependencies 域里面去，而使用 –save 安装的插件，则是被写入到 dependencies 区块里面去。

• 那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

  devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

  比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；

  而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以

  后就和他们没关系了，所以将它写入devDependencies。
  -——————–
  作者：zDeer的前端之旅
  来源：CSDN
  原文：https://blog.csdn.net/zdeer520/article/details/73431295
  版权声明：本文为博主原创文章，转载请附上博文链接！

项目常用配置

.eslintrc.js 修改

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'generator-star-spacing': 0,
    'no-debugger': 0,
    "semi": [2, "always"],// 语句强制分号结尾
    "space-before-function-paren": [0, "always"],
    "no-return-assign": 0,// return 语句中不能有赋值表达式
    "one-var": 0,
    "no-dupe-keys": 0,
    "no-cond-assign": 0,
    "no-tabs":"off",
    "no-mixed-spaces-and-tabs": 0, //关闭 tabs与空格共同存在时的验证报错
  },

vue.config.js 创建

const path = require('path');
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist', // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  assetsDir: 'assets', // 用于放置生成的静态资源
  filenameHashing: false, // 设为false 来关闭文件名哈希
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  devServer: {
    host: 'localhost',
    port: 8080,
    https: false,
    open: true, // 配置自动启动浏览器   process.platform === 'darwin'
    hotOnly: false,
    // proxy: 'http://192.168.10.100:9000', // string | Object 配置跨越处理代理
    // proxy: {
    //   // arcgis js api代理 正式环境拷贝api到/dist/static/arcgis_js_api
    //   '/static/arcgis_js_api': {
    //     target: 'http://192.168.10.26:88',
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/static/arcgis_js_api': '/arcgis_js_api' // 访问 /static/arcgis_js_api => http://192.168.10.26/arcgis_js_api
    //     }
    //   },
    //   '/': {
    //     target: 'http://192.168.10.111:9000',
    //     // target: 'http://192.168.30.208:9000',
    //     changeOrigin: true,
    //     ws: false,
    //     pathRewrite: {
    //       '^/': ''
    //     }
    //   }
    // },
    overlay: {
      warnings: true,
      errors: true
    }
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true // 解决 webpack打包时报错提示：“Inline JavaScript is not enabled”
      }
    }
  },
  configureWebpack: {
    resolve: {
      extensions: ['.vue', '.js', '.json', '.css', '.less'],
      alias: {
        // '@: 'src';   // vue-cli3.0 默认配置
        store: path.resolve(__dirname, 'src/store/modules'),
        storejs: path.resolve(__dirname, 'node_modules/store')
      },
      modules: ['node_modules', 'src/styles']
    }
  },
  // 第三方插件配置
  pluginOptions: {},
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
  lintOnSave: process.env.NODE_ENV !== 'production' // 在生产构建时禁用 eslint-loader
};

使用 pug

要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析,详细可查看官方文档

// vue-cli 3 配置:
// 由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同
cnpm i -D pug pug-html-loader pug-plain-loader
// 和2比多了一个 pug-plain-loader

// 以下配置可以不要
/**
// 在 vue.config.js (如果没有就在根目录下新建一个) 添加代码:
module.exports = {
    chainWebpack: config => {
        config.module.rule('pug')
            .test(/\.pug$/)
            .use('pug-html-loader')
            .loader('pug-html-loader')
            .end()
    }
}
*/

// vue-cli 2+ 配置:
// 下载包:
npm i -D pug pug-html-loader
// 在build/webpack.base.conf.js 的 module 中添加规则:
 module: {
    rules: [
      {
        test:/\.pug$/,
        loader: "pug-html-loader"
      },
     // 省略其他规则
    ]
  }

常用插件

// Animate.css 一款强大的预设css3动画库
cnpm i -S animate.css => cnpm install animate.css --save 写入dependencies
yarn add animate.css
// mint-ui
// 依赖pug
yarn add -D pug pug-parser
cnpm i -S mint-ui
yarn add mint-ui
// moment
cnpm i -S moment
yarn add moment

// vue-amap
// warning vue-amap@0.5.9: The engine "core-js" appears to be invalid
cnpm i -S vue-amap
yarn add vue-amap
yarn add core-js

// vue-baidu-map
cnpm i -S vue-baidu-map
yarn add vue-baidu-map
// vue-mobile-calendar
cnpm i -S vue-mobile-calendar
yarn add vue-mobile-calendar


// axios
cnpm i -D axios => cnpm install axios --save-dev 写入devDependencies
yarn add -D axios

// vue-echarts
yarn add -D vue-echarts
yarn add echarts

// lodash
cnpm i -S lodash
yarn add lodash


// less-loader@4.1.0" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
yarn add -D webpack

// css-loader
yarn add -D css-loader