Vue3的学习
2019-08-08 本文已影响0人
汶沐
全局安装脚手架:(v3 需要Node.js 8.9+版本)
npm install -g @vue/cli
or
yarn global add @vue/cli
vue create创建新项目:
vue create project-name
上面命令行执行后,会出现一个特性选择,这时候按自身需要来选择就好。
运行项目:
npm run serve
or
yarn serve
打包项目:
npm run build
拉取2.x模板##
因为cli 3的脚手架会覆盖cli 2,如果需要用到旧版本的,就要全局安装一个桥接工具:
npm install -g @vue/cli-init
//这样就可使用2.x的模板
vue init webpack project-name
由于3.x的webpack相关配置都放到脚手架的依赖里了,如果想像2.x那样配置webpack相关的,可以在package.json同级下创建 vue.config.js,在里面进行相关配置,下面是一个简单的配置模板:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: './',//根路径 从 Vue CLI 3.3 起,baseUrl已弃用,publicPath代替
outputDir:'dist',//打包的时候生成的一个文件名
assetsDir:'assets',//静态资源目录(js,css,img,fonts)这些文件都可以写里面
lintOnSave:false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'
devServer:{
open:true,//启动项目后自动开启浏览器
host:'192.168.0.2',//对应的主机名
port:8081,//端口号
https:false,//是否开启协议名,如果开启会发出警告
hotOnly:false,//热模块更新的一种东西,webpack中自动有过配置,但如果我们下载一些新的模块可以更好的给我更新一些配置
/*proxy:{
//配置跨域
'/api':{//配置跨域的名字
target:'http//localhost:5000/api',//跨域的地址
ws:true,
changOrigin:true,//是否跨域
pathRewrite:{//当前的名字
'^/api':''
}
}
}*/
}
};