vue-cli3.0 吃过的坑

2022年9月2日09:17:29

vue-cli3.0搭建与配置

为什么要使用 vue-cli3.0

  1. 模板更加制定化

  2. 配置更加简洁

如何新建项目

使用 npm 全局安装 vue-cli ：

  1. npm install -g @vue/cli //如果已经安装过就不用安装了
    我自己喜欢用yarn 安装
    2 yarn global add @vue/cli

创建项目执行：

  1. vue create my-project//my-project 就是你自己随意起的一个文件夹名字

选择项目类型

VueCLI v3.0.0-beta.6? Please pick a preset:(Use arrow keys)> xs-default(vue-router, vuex, stylus, babel, pwa, eslint, unit-jest)// 这是我运行过之后的默认设置，第一次执行create是没有的default(babel, eslint)> Manually select features//我选的是手动安装  因为不喜欢用eslint 如果实在是不幸装了这个 就在自己配置的vue.config.js里面去加一行代码    lintOnSave:false, 表示关闭格式化检查// 注：按键盘上下键选择默认（default）还是手动（Manually），//如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动，

选择特性支持

? Please pick a preset: Manually select features? Check the features neededfor your project:(Press<space> to select,<a> to toggle all,<i> to invert selection)>() TypeScript// 支持使用 TypeScript 书写源码() Progressive WebApp(PWA) Support// PWA 支持(*) Router// 支持 vue-router() Vuex// 支持 vuex(*)CSS Pre-processors// 支持 CSS 预处理器。(*) Linter/ Formatter// 支持代码风格检查和格式化。() Unit Testing// 支持单元测试。()E2E Testing// 支持 E2E 测试。// 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）//打*是我的选的配置

选择css预处理，这里我选择less

? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault):SCSS/SASS>LESS
  Stylus

选择ESLint + Prettier

? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config:(Use arrow keys)> ESLintwith error prevention only
  ESLint+ Airbnb config
  ESLint+ Standard config
  ESLint+ Prettier//这里逃脱不了感觉, 所以最后还是自己配一个vue.config.js吧  然后这里去关闭eslint

选择语法检查方式，这里我选择保存就检测


VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? 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时候检查

选择单元测试


VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution:(Use arrow keys)> Mocha+ Chai
  Jest

她会问你 ，把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在独立文件夹


VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredo you prefer placing configfor Babel, PostCSS, ESLint, etc.?(Use arrow keys)> In dedicated config files// 独立文件放置
  Inpackage.json// 放package.json里//这两个我都放过 我觉得无所谓吧  看个人习惯

键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的我保存的名字为xs-default


VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredo you prefer placing configfor Babel, PostCSS, ESLint, etc.? In dedicated config files? Savethisas a presetfor future projects?(Y/n)// 是否记录一下以便下次继续使用这套配置

确定后，等待下载依赖模块

启动项目

  1. 初始完之后，进入到项目根目录： cd my-project

  2. 启动项目：npm run serve 或者是yarn serve

  3. 在浏览器输入http://localhost:8080就可以看到vue的欢迎界面

打包上线

  1. vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build

  2. 执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

项目的大致目录结构

vue-cli3.0 吃过的坑

  1. 现在的目录是3.0的cli看上去简洁多了，去掉了2.0 build和config等目录

  2. 关于代码编写基本上与vue2的目录结构相差不大

注意：

  1. 如果想要修改端口号以及webpack配置，需要你在根目录下面创建一个vue.config.js

vue.config.js完整默认配置

module.exports={/** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
   */// 基本路径
 baseUrl:'/',// 输出文件目录
 outputDir:'dist',// eslint-loader 是否在保存的时候检查
 lintOnSave:true,// use the full build with in-browser compiler?// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler:false,// webpack配置// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack:()=>{},
 configureWebpack:()=>{},//如果想要引入babel-polyfill可以这样写// configureWebpack: (config) => {//   config.entry = ["babel-polyfill", "./src/main.js"]// },// vue-loader 配置项// https://vue-loader.vuejs.org/en/options.html
 vueLoader:{},// 生产环境是否生成 sourceMap 文件
 productionSourceMap:true,// css相关配置
 css:{// 是否使用css分离插件 ExtractTextPlugin
  extract:true,// 开启 CSS source maps?
  sourceMap:false,// css预设器配置项
  loaderOptions:{},// 启用 CSS modules for all css / pre-processor files.
  modules:false},// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 cores
 parallel:require('os').cpus().length>1,// 是否启用dll// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll:false,// PWA 插件相关配置// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa:{},// webpack-dev-server 相关配置
 devServer:{
  open: process.platform==='darwin',
  host:'127.0.0.1',
  port:8080,//我个人喜好用3000
  https:false,
  hotOnly:false,
  proxy:null,// 设置代理
  before: app=>{}},// 第三方插件配置
 pluginOptions:{// ...}}

后记：

  1. 当你准备着手一个新的项目的时候，请事先想清楚这个项目的架构以及用到的ui组件等等

  2. 比如我们的项目

1. 使用vant UI组件
2. 封装axios服务
3. 使用路由拆分（基于history）
4. 路由切换动画
。。。
反正感觉这个 我应该自己还会再加东西 因为vue.config.js里面的baseURL 感觉还没有配完  但是在上线之前 不用配vue.config.js  到时候再补吧
  • 作者：@玩Go那个玩!
  • 原文链接：https://blog.csdn.net/qq_43653325/article/details/85075392
    更新时间：2022年9月2日09:17:29 ，共 5453 字。