vue3.0从零搭建项目教程
如何搭建vue3.0项目
vue3.0的优势是更快更小，它从新审视了 vdom，更改了自身对于 vdom的对比算法。vdom从以前的每次更新，都进行一次完整遍历对比，改成了切分区块树，来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分，把速度提升了6倍；把 definePerproty改成了 proxy，对于 JavaScript引擎更加友好，响应更加高效。增强了 typescript的支持，虽然咱们在 vue2已经可使用 typescript了，可是在 vue3中，进一步增强了对 typescript的支持;若是你想了解vue3.0究竟有哪些改变，能够对比他们的官方文档。下面咱们就说一下如何搭建vue3.0的项目。javascript
安装node环境
Vue.js虽然能够在html里引用，但使用npm引入更方便包管理。等到应用须要的库和框架多起来后，一个个从html里引入就不方便了。而nodejs是一个服务js平台，有npm，grunt、express等强大的代码与项目管理应用。还有webpack，v8等强大的功能。因此咱们的vue必须安装在node环境里面css
一、下载node（https://nodejs.org/en/）
二、安装nodehtml
（1）找到你下载的安装包并双击会出现如下界面，点击next
（2）方框里面打勾，选择继续
（3）选择安装目录。尽可能不选择c盘，而后一路next
前端
（4）点击installvue
三、如何检查node是否安装成功
win+R==>cmd==>进入命令行java
// 输入如下命令，查看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源node
nrm ls
（2）如何切换npm源试例(以使用taobao为例)
webpack
安装vue-cli 3.0
npm i @vue/cli -g
若是你以前已经安装过vue2.0，就升级一下版本就能够啦，操做以下git
（1）删除原有的vue-cli脚手架github
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生活啦。