vue架手架4和3的区别_vue-cli3脚手架的使用和相关配置

前言

通过 @vue/cli 搭建交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

快速创建一个项目

安装vue-cli3;

注意vue-cli3要求node版本8或者更高以上，(推荐8.10.0+)

安装命令 npm install –g @vue/cli

或者 cnpm install –g @vue/cli 或者 yarn global add @vue/cli

检测是否安装成功

创建项目：

vue create hello-world

第一次创建的时候应该之后后面两个选项，defalut是默认的，包含了babel和eslint; Manually select features是可以手动选择所需要的插件；而demo是作者之前配置过的，保留下来的配置；

按上下箭头选择配置，空格键选中,选择完成后，回车键继续，会依次问询你所选插件的配置，

vue-router选择模式

所用的css预处理语言,我选择了sass;

选择的代码风格和格式校验

代码校验方式，我选择了保存即校验，也可以在add和commit的时候校验；

在哪里保存配置我这些插件的配置，我选择了独立文件

是否保存为保存为一个将来可复用的 preset；

选择完毕之后开始安装插件：

看一下安装完成的项目目录

安装完成之后，cd hello-world,进入文件夹，npm run serve启动项目；

你也可以使用图形化界面

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

不做重点讲解；

vue.config.js

配置api的地址配置参考#

项目搭建完成，因为 vue-cli 3 的项目初始化，帮开发者已经解决了 80% ，甚至绝大部分情形下的 webpack 配置。但开发过程中难免要遇到需要开发者自己配置的点东西，那我们要如何配置呢，这点就需要在项目根目录下手动新建一个 vue.config.js，此处我提供的一个我们项目中的常用模版；针对以下选项做大概的讲解；

const path = require('path')

const webpack = require('webpack')

module.exports = {

// 修改output.path

outputDir: 'dist',

// 修改output.publishPath

baseUrl: './',

chainWebpack: config => {

// 添加全局scss文件

const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

types.forEach(type => {

config.module.rule('scss').oneOf(type).use('style-resource')

.loader('style-resources-loader')

.options({

patterns: [

path.resolve(__dirname, 'src/css/base.scss')

]

})

})

// 移除 prefetch 插件 //预加载

config.plugins.delete('prefetch')

// 引入

const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'

config.plugin('dll-reference-plugin')

.use(webpack.DllReferencePlugin)

.tap(options => {

options[0] = {

context: __dirname,

manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))

}

return options

})

config.plugin('add-asset-html-webpack-plugin')

.use('add-asset-html-webpack-plugin')

.tap(options => {

options[0] = {

filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)

}

return options

})

}

}

baseUrl：从 Vue CLI 3.3 起已弃用，请使用publicPath

publicPath

Type: string

Default: '/'

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 http://shop.ktvsky.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 http://shop.ktvsky.com/vue/，则设置 publicPath 为 /vue/。

也可以使用相对路径 './',这样这样打出来的包可以被部署在任意路径

相对路径的打包后的

绝对路径

outputDir

Type: string

Default: 'dist'

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。