VUE CLI环境搭建文档
程序员文章站
2022-12-09 08:33:26
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代码,由于npm官方镜像访问网速问题,我们选择使用淘宝的镜像源 2.1 命令行 用法:create [ ......
vue cli环境搭建文档
1.安装node.js
下载地址
https://nodejs.org/zh-cn/download/
2.全局安装vue cli
win+r键打开运行cmd窗口输入一下代码,由于npm官方镜像访问网速问题,我们选择使用淘宝的镜像源
npm config set registry https://registry.npm.taobao.org npm install -g @vue/cli npm install -g @vue/cli-service-global npm install -g @vue/cli-service
2.1 命令行
用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetname> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinepreset <json> 忽略提示符并使用内联的 json 字符串预设选项 -m, --packagemanager <command> 在安装依赖时使用指定的 npm 客户端 -r, --registry <url> 在安装依赖时使用指定的 npm registry -g, --git [message] 强制 / 跳过 git 初始化,并可选的指定初始化提交信息 -n, --no-git 跳过 git 初始化 -f, --force 覆写目标目录可能存在的配置 -c, --clone 使用 git clone 获取远程预设选项 -x, --proxy 使用指定的代理创建项目 -b, --bare 创建项目时省略默认组件中的新手指导信息 -h, --help 输出使用帮助信息
2.2 可视化工具
vue ui
3.安装vue router
3.1 命令
npm install vue-router
3.2 修改main.js增加一下代码,添加vue-router的引用
import vue from 'vue' import vuerouter from 'vue-router' vue.use(vuerouter) const router = new vuerouter({ base: '/ap', //解决发布子站点后空白页面的问题,如果发布在子站点或者子目录中时,需要设置 mode: 'history',//路由模式:history为直接路由访问,hash为#号方式(注:微信公众号访问中转发hash模式存在截断问题) routes: routers //routers为router.js文件中配置的路由 }) new vue({ router, render: h => h(app) }).$mount('#app')
3.3 增加router.js文件,并添加相关的路由设置内容
import home from './components/helloworld.vue' import defaults from './components/default.vue' const routers = [ { path: '/home', name: 'home', component: home }, { path: '/:id',//但斜杠为默认首页路径,可以通过冒号来设置对应的参数名称,组件中可以通过$route.params.id来获取对应的参数名称 component: defaults } ] export default routers
3.4 修改app.vue文件,增加router-view组件
<template> <div id="app"> <router-view></router-view> </div> </template>
4.编译环境配置
4.1 模式配置文件
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外,vue cli 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写。
4.2 环境变量
配置文件中的环境变量必须以vue_app_ 开头,一个环境文件只包含环境变量的“键=值”对
vue_app_apiserver="http://127.0.0.1/api/"
4.3 模式
模式是 vue cli 项目中一个重要的概念。默认情况下,一个 vue cli 项目有三个模式:
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
4.4 使用环境变量
如需在 .js 文件中使用则,在需要在文件开头引入vue对象
"use strict"; import vue from 'vue';
在页面可以通过process.env 来调用相应的环境变量,如:
console.log(process.env.vue_app_secret)
5 编译
开发环境(此编译对应development 模式,加载对应的 .env.development 配置文件)
npm run serve
生产环境(此编译对应production 模式,加载对应的 .env.production 配置文件)
npm run build
上一篇: 数据库分库解决方案