1. 使用vue-cli3.0创建项目

发布于 2022年 04月 09日 04:52

vue-cli 3.0是基于webpack 4.0之上构建的vue脚手架工具,得益于webpack4.0的零配置特性,使得在使用vue-cli 3.0时,零配置就可以开发和打包vue项目

vue-cli 3.0及更高版本为了区别vue-cli 1.0和vue-cli 2.0,名字更改成了@vue/cli,如果你的电脑已经安装了比如vue-cli 2.0,需要卸载它,然后安装@vue/cli,不用担心安装了更高版本的vue-cli不能兼容老项目,比如用vue-cli 2.0创建的项目,启动和打包还是分别使用npm run dev和npm run build即可

vue --version // 查看电脑上已安装的vue-cli的版本
npm uninstall vue-cli -g  // 卸载老版本vue-cli
npm install -g @vue/cli // 安装3.0版本的vue-cli

mac电脑卸载和安装vue-cli方式如下:

sudo chmod -R 777 /usr/local/lib/node_modules/  // 放开权限
sudo npm uninstall vue-cli -g  // 卸载老版本
sudo npm install -g @vue/cli  // 安装新版本

安装完毕,在cmd中输入vue ui,启动项目管理器,新建一个vue项目,在这个过程需要操作步骤有:

1. 新建项目文件夹-vue-base-frame
2. 选择包管理器-npm
3. 初始化git仓库默认打开
4. 选择一套预设--选择手动
5. babel-打开
6. Router-打开
7. Vuex-打开
8. CSS Pre-processors(css预处理器)-打开
9. 使用配置文件-打开
10. pick a css pre-processor 下拉选择less
11. pick a linter / formatter config 下拉选择 eslint + standard config
12. lint on save-打开
13. 然后点击“创建项目,不保存预设”

经过上述步骤,就可以静待vue基础模板下载下来,当模板下载完成后,cmd进入项目根目录,执行npm run serve启动项目,这和vue-cli 2.x版本中npm run dev启动方式不一样,启动完成,浏览器打开这个项目,可以看到两个简单的页面Home和About,接下来,需要对这个vue模板进行改造,在改造之前,我先来介绍一下,项目里各个文件的作用

先从项目根目录开始看起,主要有三个文件

  1. package.json 项目配置文件,项目中所需的依赖都会在这里说明,当其他人要使用你这个项目时,只需要执行npm install 就可以安装这些依赖,启动项目了,这里解析下json文件里面dependencies和devDependencies,dependencies声明生成环境所需要的依赖,也就是项目打包以后这些依赖也是要打包进去的,而devDependencies代表开发环境的依赖,也就是方面你开发而加载的一些依赖,这些依赖在项目打包时不会放进去
  2. public文件夹 公共文件夹,在vue-cli 2.x创建的项目模板中,就是static这个文件夹,vue-cli 3.x创建的项目模板中,取而代之的就是这个public文件夹,这里面有一个index.html文件,它是提供给webpack,使其在运行和打包的时候作为模板文件使用,生成最后项目里的index.html
  3. src文件夹 这是项目的主文件夹,以后我们开发都是在这个文件夹内完成的

再来看下这个src这个主文件夹里都有哪些文件:

  1. assets 存放项目里的静态资源文件,比如图片,图标,字体文件等
  2. components 从代码里抽离出一些可复用的逻辑组成一个组件,以便我们复用
  3. views 项目里的页面都放在这个文件夹里
  4. App.vue 项目里的基础组件(根组件)
  5. main.js 项目的入口文件,项目在开发运行或者编译的时候,都会以这个为起始点
  6. router 存放路由文件
  7. store 存放状态管理文件

以上就是我们下载下来的初始vue模板的所有说明,这里提示一下,因为在启动vue ui(项目管理器)上开启了eslint代码检查,这里防止你以后写代码一直报空格和换行错误,需要在根目录里找到.editorconfig文件和.eslintrc.js文件,修改一下

// .editorconfig.js
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4 // 将这个项目默认的2改为4
trim_trailing_whitespace = true
insert_final_newline = true
// .eslintrc.js
  rules: {
    'indent': ['error', 4], // 新增这一行代码
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }

vue.config.js文件

你会发现通过vue-cli 3.x创建的项目里没有这个文件,是因为最开始我讲到了基于webpack4.0特性0配置特性,在使用vue-cli 3.0创建项目的时候,webpack的配置均被隐藏了,老版本的vue-cli,创建的项目,我们可以找到build和config这两个文件夹,但是vue-cli 3.x创建的项目已经没有这两个文件夹,当需要覆盖原有配置时,需要在根目录下新建vue.config.js文件,来配置新的配置,当项目启动以后vue.config.js会被自动加载

// vue.config.js
/* 如果当前是生产环境production
如果项目部署到域名(www.baidu.com)根目录下,直接'/' : '/',
如果需要部署到(www.baidu.com/iview-admin)目录下,直接'/iview-admin/' : '/'
如果是开发环境,直接'/' : '/' */
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/'
/* 引入node的path模块 */
const path = require('path')
/* 自定义方法resolve */
const resolve = dir => {
  return path.join(__dirname, dir);
}

// 引入webpack
// const webpack = require('webpack')



module.exports = {
  lintOnSave: false, // 关闭eslint检查
  /* webpack配置 */
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // 用@代替src,在项目里你需要引入文件的时候,只需要@/api,@/config,@/mock...即可
      .set('_c', resolve('src/components')) // 用_c代替src/components,我们需要引入组件时,只需要_c/HelloWorld.vue即可
  },

  // 打包时不生成map文件,这样减少打包的体积,并且加快打包的速度
  productionSourceMap: false,

  // 跨域配置
  devServer: {
    /* 自动打开浏览器 */
    open: true,
    hot: true, // vue cli3.0 关闭热更新
    // liveReload: false, // webpack liveReload关闭
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 4000,
    // proxy: 'http://localhost:4000', // 告诉开发服务器,将任何未知请求(没有匹配到静态文件的请求),都代理到这个url上,来满足跨域的请求
  },
  // configureWebpack: {
  //   plugins: [
  //     new webpack.ProvidePlugin({
  //       $:"jquery",
  //       jQuery:"jquery",
  //       "windows.jQuery":"jquery"
  //     })
  //   ]
  // },
}

推荐文章