搭建vue --2.x

搭建vue2.0环境框架  （v4.2.3）

一：安装node 环境

1. 下载地址为：https://nodejs.org/en/
2. 检查是否安装成功：如果输出版本号，说明我们node 环境安装成功

（在cmd中输入  node -v  ---> v8.11.1）

（在cmd中输入  npm -v  ---> 6.0.0）

1. 为了提高我们的效率，可以使用淘宝的镜像: https://npm.taobao.org/

输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后已送到npm 的地方直接用cnpm 来代替就好了。

检查是否安装成功：cnpm -v

二：搭建vue项目环境

1.全局安装vue-cli

npm install -g @vue/cli

（若没反应，多按几次；否则取消重来）

2.新建目录打开，选中地址栏，输入cmd---->回车

3.在该cmd中输入vue create my-app

4.依次输入

 

 

 

5.下载插件Vetur  VueHelper

1. Cd my-app ----npm run serve （不用管报错）

7.Ctrl c  取消

8.Cnpm install

9.Npm run serve

10.复制在浏览器看

11.在my-app 里与package.json 同级创建文件-----  .env.development   .env.production    

12.在 .env.development   输入------------------（①）-----

13.在    .env.production     输入-----------（②）------

14.打开package.json文件 ，输入-----（③）-----

15.关闭cmd

16.访问环境变量-----打开App.vue---在script标签里输入-------（④）---------

17.Cd my-app ------- Npm run serve

 

 

①：NODE_ENV = "开发环境"

VUE_APP_URL=http://xiaomi.com

②：NODE_ENV = "生产环境"

VUE_APP_URL=http://baidu.com

③："serve": "vue-cli-service serve --mode development",

"build": "vue-cli-service build --mode production"

④： data(){

    return{}

  },

created() {

    console.log('当前环境变量：' + process.env.NODE_ENV);

    console.log('当前环境路径：' + process.env.VUE_APP_URL);

  }