1.下载vue脚手架
npm install -g @vue/cli
2.使用vue cli3创建项目
1 打开vscode,打开存放项目的文件夹,建一个终端
2.执行创建项目命令
vue create projectname
这里的projectname为项目名称,不能有大写字母
3.选择预置
选下面那个是自己配
4.选择项目需要用到的功能
按键盘↑ ↓键进行选择,按空格键选择其中某一个
本文选择如下几项功能:
Babel
Router
Vuex
Css Pre-processors
Lint/Formatte
5.是否使用history路由
本文暂未使用,如需使用可参考 Routing with history.pushState
6.选择css处理器
这里本文选的less
7.代码风格和eslint
根据个人习惯选择即可
8.选择在保存时还是在提交时修改
9.选择lint的配置文件如何存放
为了便于管理,这里选择分别存到具体的config文件
10.是否保存本次创建项目的配置项
可用于下次快速创建项目,但每次项目要求不一样,一般不保存
11.创建完成的项目目录结构
项目目录结构
12.vue cli配置文件
{
"packageManager": "npm",
"presets": {
"vue_create_project": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "standard",
"lintOn": [
"save"
]
}
},
"router": true,
"routerHistoryMode": false,
"vuex": true,
"cssPreprocessor": "sass"
}
},
packageManager 用于指定安装包和运行时,使用的是npm还是yarn
presets 上述安装步骤中,第10步询问是否保存创建配置,用于下次快速创建项目
关于配置,不小心踩的坑
安装过程中,曾经询问过我是用npm还是yarn指定安装包和运行,但是,由于没细看,选了yarn,后续安装过程中一直报错,具体错误如下图:
多次卸载重装vue cli,但是并没有解决问题,也没有重新提醒我选择npm或者yarn。
想了想,那可能是配置文件的问题了,但是又不知道vue cli 3的配置文件存在哪,想了想,会不会和设置npm源一样,可以用npm config这类指令呢
于是,打开了cmd,输入了vue -h
看到了有vue config指令,输入后显示如下:
除了把配置文件打印出来,还把配置文件路径打印出来了,so,不用看了,多次卸载重装,但是依旧未果的原因,就是因为卸载重装不会删除配置文件,这里直接把packageManager改成npm,就解决了上面遇到的问题了
————————————————
vue-cli3.0添加插件方法
例如,添加vuetify UI插件,使用如下命令
vue add vuetify
如果是普通的插件,不会对页面结构有太多的影响,还可以继续使用npm install的方法
npm install axios
全局变量的使用
在项目根目录下创建.env文件,添加自己的配置信息,通过process.env.环境变量名得到环境变量值。
同样,我们可以创建.env.development文件(开发环境)、.env.production文件(生产环境)
vue-cli3.0独立运行.vue文件
我们可以使用vue serve和vue build命令独立运行单个* .vue文件,但是需要先使用如下命令安装一个额外的全局插件:
npm install -g @vue/cli-service-global
or
yarn global add @vue/cli-service-global
使用vue serve运行单个vue文件
vue serve HelloWorld.vue
vue项目管理器
使用如下命令打开图形化vue项目管理器,如下图所示:
vue ui
在项目左侧项目依赖添加项目所需要的依赖
搜索需要的依赖选中,在右下角安装依赖
vue-cli3.0配置基础的路径
项目根目录创建vue.config.js文件
module.exports = {
baseUrl: '/', //根路径
outputDir: 'dist', //构建输出目录
assetsDir: 'assets', //静态资源目录(js,css,img,fonts)
lintOnSave: false, //是否开启eslint保存监测,有效值: true || false || 'error'
devServer: {
open: true, //打开页面
host: 'localhost', //域名 127.0.0.0本机 0.0.0.0真机测试
port: '8081', //端口号
https: false, //是否使用https
hotOnly: false, //热更新
proxy: {
//配置跨域
'/api': {
target: 'http://localhost:5000/api/', //协议头、域名、端口号有一个不同就是跨域
ws: true, //是否跨域
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};