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

VUE CLI环境搭建文档的更多相关文章

  1. 环境搭建文档——Windows下的Python3环境搭建

    前言 背景介绍: 自己用Python开发了一些安卓性能自动化测试的脚本, 但是想要运行这些脚本的话, 本地需要Python的环境. 测试组的同事基本都没有安装Python环境, 于是乎, 我就想直接在 ...

  2. 各种Java项目环境搭建-文档引用汇总记录

    springmvc环境搭建 1.如何用Maven创建web项目(具体步骤) 2.springmvc环境搭建,一步一步超简单

  3. 分享一份关于Hadoop2.2.0集群环境搭建文档

    目录 一,准备环境 三,克隆VM 四,搭建集群 五,Hadoop启动与测试 六,安装过程中遇到的问题及其解决方案 一,准备环境 PC基本配置如下: 处理器:Intel(R) Core(TM) i5-3 ...

  4. windows自动化测试环境搭建文档

    步骤如下: 1.搭建安卓环境,需要设置系统变量“ANDROID_HOME”. 2.安装Node.js http://www.nodejs.org/download/ 下载相关操作系统的版本 3.安装A ...

  5. 环境搭建文档——Windows下的Git搭建详解

    Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.具体安装步骤如下: 第一步:先从官网下载最新版本的Git 官网地址:https://git-scm.com/do ...

  6. 生产环境轻量级dns服务器dnsmasq搭建文档

    dnsmasq搭建文档 一．生产环境域名解析问题 之前生产环境设备较少,是通过维护master(192.168.1.1)设备的hosts文件实现的.每次新增设备后,需要在master的hosts文件中 ...

  7. 手把手教你搭建一个跟vue官方同款文档（vuepress）

    前言 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题 ...

  8. vue开发环境搭建Mac版

    一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对  ...

  9. Vue 项目环境搭建

    Vue项目环境搭建 ''' 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnp ...

随机推荐

  1. java代码注释：单行//，多行/* */，文档注释/** */

    1.单行注释      //: //后到本行结束的所有字符会被编译器忽略; 2.多行注释     /* */: /*  */之间的所有字符会被编译器忽略 3.文档注释     /** */: 在/** ...

  2. border写一个直角三角形

    文章地址 https://www.cnblogs.com/sandraryan/ border的四条边是平分的.你可以放大试试 .box1 { width:;; border: 100px solid ...

  3. PHP 面试题三

    1.nginx使用哪种网络协议? nginx是应用层 我觉得从下往上的话 传输层用的是tcp/ip 应用层用的是http fastcgi负责调度进程 2. <? echo 'hello tush ...

  4. js 制作分页

    如图所示 在html中调用方法 getpage(7, 1, 1, 'URL') 1.page.js文件 代码 function getpage(count, countPage, pageIndex, ...

  5. linux主次编号

    字符设备通过文件系统中的名子来存取. 那些名子称为文件系统的特殊文件, 或者设备文 件, 或者文件系统的简单结点; 惯例上它们位于 /dev 目录. 字符驱动的特殊文件由使用 ls -l 的输出的第一 ...

  6. 【9001】Internet消息发布

    Time Limit: 1 second Memory Limit: 256 MB 问题描述 设Internet上有N个站点,通常从一个站点发送消息给其他N-1个站点,需依次发送N-1次.这样从一个站 ...

  7. linux 原子变量

    有时, 一个共享资源是一个简单的整数值. 假设你的驱动维护一个共享变量 n_op, 它告 知有多少设备操作目前未完成. 正常地, 即便一个简单的操作例如: n_op++; 可能需要加锁. 某些处理器可 ...

  8. 常见DOS操作

    D: 去往D盘 cd.. 返回上一级目录 cd 文件名 目录切换到该文件名(子目录)下 cd \ 直接回根目录 dir 当前根目录下的文件目录 dir /s 所有目录

  9. CentOS服务器安装mysql

    1.配置YUM源 下载mysql源安装包 [root@localhost~]#wget http://dev.mysql.com/get/mysql57-community-release-el7-8 ...

  10. Spring Tool Suite记录

    快速查询:选中项目名按CTRL+H