vue-cli3.0如何从零搭建项目
如何搭建vue-cli3.0项目
vue3.0的优点是更快更小，它重新审视了 vdom，更改了自身对于 vdom的对比算法。vdom从之前的每次更新，都进行一次完整遍历对比，改为了切分区块树，来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分，把速度提高了6倍；把 definePerproty改为了 proxy，对于 JavaScript引擎更加友好，响应更加高效。加强了 typescript的支持，虽然我们在 vue2已经可以使用 typescript了，但是在 vue3中，进一步加强了对 typescript的支持;如果你想了解vue3.0究竟有哪些改变，可以对比他们的官方文档。下面我们就说一下如何搭建vue3.0的项目。
安装node环境
Vue.js虽然可以在html里引用，但使用npm引入更方便包管理。等到应用需要的库和框架多起来后，一个个从html里引入就不方便了。而nodejs是一个服务js平台，有npm，grunt、express等强大的代码与项目管理应用。还有webpack，v8等强大的功能。所以我们的vue必须安装在node环境里面
1、下载node（https://nodejs.org/en/）
2、安装node
（1）找到你下载的安装包并双击会出现以下界面，点击next
（2）方框里面打勾，选择继续
（3）选择安装目录。尽量不选择c盘，然后一路next
（4）点击install
3、如何检查node是否安装成功
win+R==>cmd==>进入命令行
// 输入以下命令，查看node版本，如果出现node的版本，说明已经安装成功
node -v
安装yarn
//（yarn = npm）
npm i yarn -g
安装nrm及npm registry设置
// use npm
npm i nrm -g
// use yarn
yarn global add nrm
（1）如何查看可用的npm源
nrm ls
（2）如何切换npm源试例(以使用taobao为例)
安装vue-cli 3.0
npm i @vue/cli -g
如果你之前已经安装过vue2.0，就升级一下版本就可以啦，操作如下
（1）删除原有的vue-cli脚手架
npm uninstall vue-cli -g
（2）安装3.0脚手架
npm install -g @vue/cli
如何检测vue版本
//后面那个V是大写的。
vue -V
如果你在安装脚手架的时候总是报如下这样的错，那么你就需要切换npm源为https://npm.taobao.org就可以啦。上面有切换npm源的方法
以搭建一个项目名称为vue-test的Vue前端项目为例
在终端输入以下命令
//创建vue项目
vue create vue-test
（1）选择 Manually select features
（2）选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）
此处按上下键选择，按空格键2选中
（3）选择CSS预处理器语言，此处选择LESS
（4）选择ESLint的代码规范，此处使用 Standard代码规范
（5）选择何时进行代码检测，此处选择在保存时进行检测
（6）选择单元测试解决方案，此处选择 Jest
（7）选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中
（8）配置完成后等待Vue-cli完成初始化
（9）vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目
// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve
// - 打包编译
yarn build
// - 执行lint
yarn lint
// - 执行单元测试
yarn test:unit
vue.config.js配置
搭建好vue3.0脚手架会发现,对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?
vue cli3.0项目中需要自己配置这些，新建文件’vue.config.js’，(这文件名是固定这么写的)，与package.json在同一级目录下。如果项目的根目录中存在’vue.config.js这个文件，那么它会被@vue/cli自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。下面的vue.config.js是根据我自己的经验配置好的，可以直接把所有代码复制放在vue.config.js文件里面就可以。而且我注释的非常清楚。
const path = require("path");
const UglifyPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
// 基本路径
/* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
/* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
outputDir: 'dist', //输出的文件目录
lintOnSave: true, //是否在保存的时候检查
runtimeCompiler: true, //关键点在这 原来的 Compiler 换成了 runtimeCompiler
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: config => {
if (process.env.NODE_ENV === "production") {
// 为生产环境修改配置...
config.mode = "production";
// 将每个依赖包打包成单独的js文件
var optimization = {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 20000, // 依赖包超过20000bit将被单独打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
}
}
}
},
minimizer: [
new UglifyPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true, // console
drop_debugger: false,
pure_funcs: ["console.log"] // 移除console
}
}
})
]
};
Object.assign(config, {
optimization
});
}else {
config.mode = "development";
var optimization2 = {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 20000, // 依赖包超过20000bit将被单独打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
}
}
}
}
};
}
Object.assign(config, {
// 开发生产共同配置
// externals: {
// 'vue': 'Vue',
// 'element-ui': 'ELEMENT',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex'
// } // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(用于csdn引入)
resolve: {
extensions: [".js", ".vue", ".json"], //文件优先解析后缀名顺序
alias: {
"@": path.resolve(__dirname, "./src"),
"@c": path.resolve(__dirname, "./src/components"),
"@v": path.resolve(__dirname, "./src/views"),
"@u": path.resolve(__dirname, "./src/utils"),
"@s": path.resolve(__dirname, "./src/service")
}, // 别名配置
plugins: []
},
optimization: optimization2
});
},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
// extract: true, //注释css热更新生效
// 开启 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', //自动打开浏览器
open: false, //是否自动打开浏览器
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
// proxy: null, // string | Object
/* 使用代理 */
proxy: {
"/api": {
/* 目标代理服务器地址 */
// target: "http://192.168.0.106:8080/",
target: "http://192.168.1.126:8080/", //阳洋
/* 允许跨域 */
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
},
before: app => {}
},
// 第三方插件配置
pluginOptions: {}
};
好啦，vue3.0的项目就已经搭建完成，可以开始你的3.0生活啦。