一、 初始化项目

vue cli2初始化项目

vue init webpack my-project

 vue cli3初始化项目

vue create my-project

vue cli3还可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

 上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

 二、项目结构

左边为vue cli2, 右边为vue cli3

vue cli2项目中,build文件夹:webpack的一些相关配置;config文件夹:项目开发环境和生产环境的一些相关配置;static 文件夹:存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件,打包时这个文件夹将原封不动的放到dist文件夹下面。

vue cli3项目中,没有了build, config文件夹,vue  cli3中的public相当于vue cli2中的static静态文件夹

而且vue cli3中还多了一个.git文件,方便我们项目管理

三、package.json

vue cil2中,执行 npm run dev 命令进行启动我们的项目

“--inline” 是 重新加载改变的部分,不会刷新页面,--progress是启动项目时显示进度,“--config build/webpack.dev.conf.js” 是执行build下面的webpack.dev.conf.js配置文件。webpack.dev.conf.js文件是我们在开发环境下的webpack配置文件,

“start” 和“dev”的作用是一样的,“build” 的作用是执行 build下的build.js文件,将当前的项目进行打包。打包后生成一个dist文件夹,放在其里面。

 

vue cil3中,执行 npm run serve 命令进行启动我们的项目, 应用development模式,npm run build 应用production模式

vue cli3开发依赖少了很多,因为vue3.0讲究的是 0 配置,因为不显示的这些文件不需要我们去改,那默认的那些依赖存在哪里呢?

vue cli2中的config文件夹, 项目开发环境和生产环境的一些相关配置;

vue cli2中的config文件夹隐藏到了“node_modules”  =>  “@vue”  => cli-service => webpack.config.js中,而在webpack.config.js中有这一行代码:

所以再找到Service.js文件,这里面才是我们要的配置文件。

四、环境变量

在 Vue CLI 2.x 中,如果需要定义环境变量,需要在 build/webpack.dev.conf.js 中加入:

plugins:[
	new webpack.DefinePlugin({
		'process.xxx': 'some value'
	})
]

 而在 Vue CLI 3.x 中,我们可以使用配置文件的方式便捷的进行配置:

在项目中新建 .env 文件,写入

VUE_APP_KEY=VALUE

 即可在需要的地方使用 process.env.VUE_APP_KEY 调用了。注意,这里环境变量必须以 VUE_APP_ 开头。

配置文件同样支持多环境,即 .env.development 文件表示 development 环境;.env.production 文件表示 production 环境。

.env.fat

VUE_APP_BASEURL=xxx
VUE_APP_CDNPATH=xxx

在使用 npm 命令时,可以在package.json中通过指定 --mode xxx 来启用某一环境的环境变量。

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "analyz": "vue-cli-service build --report",
    "fat-build": "vue-cli-service build --mode fat",
    "lint": "vue-cli-service lint",
  },

注:.env 文件为所有环境的公用环境变量。

五、vue.config.js

vue cli3中,vue.config.js是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。

vue.config.js:

let pageMethod = require('./util/getPages.js');

pages = pageMethod.pages();
module.exports = {
    pages,
    publicPath:'./',//部署应用包时的基本 URL,所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径
    outputDir:'dist',//运行时生成的生产环境构建文件的目录
    assetsDir:'static',//放置生成的静态资源(js,css,img,fonts)的目录
    filenameHashing:false,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存(public中的静态文件不会加hash)
    productionSourceMap:false,//生产环境的 source map(打包引用的是js,错误指向map,便于解析)

    css:{
        modules:false,//只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
        sourceMap:false
    }
}