github地址 docs文件夹
文档地址
安装vue-cli 3.0 方式
npm install -g @vue/cli
vue-cli 3.0创建工程的方式和2.0不一样
create 代表可以创建一个新的项目 vue create vue3-demo
add 在已创建的项目中添加新的插件
invoke 在已创建的项目调用插件
inspect 检查webpack的配置
serve 开发环境 npm run dev(2.0)
bulid 打包成生产环境
ui 打开 vue-cli 的 ui
init 生成一个项目
查看帮助
vue --help
查看具体命令的帮助
vue create --help
vue-cli 3创建流程
1.vue create vue3-demo
默认带babel(es6转换为es5的插件),eslint
手动选择要安装的功能,绿色代表选中,空格选中,a代表全选,i代表反选
使用 package.json保存配置
是否将此配置保存为以后项目的预设,选择n
创建完成
使用npm run serve运行开发环境
vue-cli3.0添加插件
在2.0中,在终端使用npm install axios这种方式添加插件
3.0中 使用add方法, vue add vuetify(vue-cli-plugin-vuetify)安装vue的ui库
vue-cli3.0中使用环境变量
在项目的根目录下创建.env文件,定义VUE_APP_+后缀,比如VUE_APP_URL=https://api.com
修改.env文件之后需要重启环境
.env.development 开发环境
.env.production 生产环境
环境变量名称必须以VUE_APP_开头,如果不是,假设在.env.development中不是,则会自动使用.env文件中的环境变量
vue-cli3.0中独立运行.vue文件
在项目的根目录中创建一个.vue文件 hello.vue
在终端中使用vue serve Hello.vue
提示需要安装一个service插件,安装之后,再次使用vue serve Hello.vue
vue-cli3.0中图形页面构建项目GUI
在任意目录使用 vue ui
vue-cli 3.0 配置基础的路径
在项目的根目录下创建 vue.config.js 必须是这个名字
module.exports = { baseUrl: '/', // 根路径
outputDir: 'dist', // 构建输出目录 npm run build
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
lintOnSave: false, // 是否开启eslint保存检测,有效值: true || false || 'error'
}
配置跨域请求
module.exports = { baseUrl: '/', // 根路径
outputDir: 'dist', // 构建输出目录 npm run build
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
lintOnSave: false, // 是否开启eslint保存检测,有效值: true || false || 'error'
devServer: {
open: false, // 使用npm run serve 之后是否自动在游览器中打开项目
host: 'localhost', // 主机名字
port: 8081, // 端口号
https: false, // true启动游览器会给出一些警告
hotOnly: false, // 热更新 webpack已经有
proxy: {
// 配置跨域,请求后端接口
'/api': {
target: 'http//localhost:5000/api/',
ws: true, // 是否跨域
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
接入后台接口
module.exports = { baseUrl: '/', // 根路径
outputDir: 'dist', // 构建输出目录 npm run build
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
lintOnSave: false, // 是否开启eslint保存检测,有效值: true || false || 'error'
devServer: {
open: false, // 使用npm run serve 之后是否自动在游览器中打开项目
host: 'localhost', // 主机名字
port: 8081, // 端口号
https: false, // true启动游览器会给出一些警告
hotOnly: false, // 热更新 webpack已经有
proxy: {
// 配置跨域,请求后端接口
'/api': {
target: 'http//localhost:5000/api/',
ws: true, // 是否跨域
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before(app) {
// http://localhost:8081/api/goods
app.get('/api/goods', (req, res) => {
res.json();
})
}
}
};
卸载vue-cli 3.x版本
npm uninstall -g @vue/cli
Vue CLI 的包名称由 vue-cli
改成了 @vue/cli
。 如果你已经全局安装了旧版本的 vue-cli
(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它。
拉取 2.x 模板 (旧版本)
Vue CLI 3 和旧版使用了相同的 vue
命令,所以 Vue CLI 2 (vue-cli
) 被覆盖了。如果你仍然需要使用旧版本的 vue init
功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project
还没有评论,来说两句吧...