vue-cli 3.0版本学习

vue

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

以上是 vue-cli 3.0版本学习 的全部内容, 来源链接: utcz.com/z/376640.html

回到顶部