vue 一步一步学习搭建基础环境 (一)

vue 一步一步学习搭建基础环境 (一)

我们的开发的项目通常是由一个团队协作完成,每个人会按照分配的功能模块完成开发测试和部署,因此我们需要使用一个能够同步代码并且控制版本的工具,能够更新其他项目成员的代码的同时,也可以提交自己的代码给其他人.
现在常见的版本配置工具有两个,一个是 subversion 一个是 git . 这里我推荐使用git 工具. 好处等使用的时候就知道了.

一 , 基础配置工具

1, git 的安装和使用:
https://blog.youkuaiyun.com/yulizi0215/article/details/104192326

2, gti 服务的搭建
https://blog.youkuaiyun.com/yulizi0215/article/details/104314665

3,vue开发环境的搭建

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

vue 的开发环境依赖于 node.js , 我们暂时把它理解为 vue 的 jdk . 如果需要详细了解,请看官方的文档.

https://nodejs.org/zh-cn/

node.js 一直有版本的迭代, 到此文档发布时: 12.16.10 版本(长期支持版).

vue 现在发布的版本为 3.0 版本 , 不同版本的 对于node 的引用是不一样的, 就像 jdk 一样, 如果引用了没有兼容的版本,就会编译错误.

因此,出现了. nvmw
nvmw 是一个用来管理node 版本的工具.我们可以直接通过 切换命令,引用不同的 node.js .

nvmw 的安装: 这里用到git 命令. 所以 开始vue项目的开发之前 优先安装 git ! 优先安装 git ! 优先安装 git !

创建一个放置 nvmw 的目录:
我放到了: G:\nodenpm_git\nvmw 中. (自己配置路径)

git clone https://github.com/hakobera/nvmw.git  

配置环境变量:
设置 G:\nodenpm_git\nvmw 目录到你的 PATH 环境变量中:

nvmw 默认是从 http://nodejs.org/dist/ 下载的, 国外服务器, 必然很慢,
进入nvmw的程序目录：
nvmw.bat 修改

if not defined NVMW_NODEJS_ORG_MIRROR (
  set "NVMW_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node"
)

if not defined NVMW_IOJS_ORG_MIRROR (
  set "NVMW_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs"
)

get_npm.js 修改

var NVMW_NPM_MIRROR = ' http://npm.taobao.org/mirrors/npm';

1.修改nvmw.bat文件137行，x64改为win-x64

2.修改fget.js文件47行，XMLHTTP 更改为ServerXMLHTTP

3.修改get_npm.js文件38行if…else代码块如下：

    if (!npmVersion) {
      return noNpmAndExit();
    }
    downloadNpmZip(npmVersion);
  });
} else {
  var pkgUri = util.format('http://npm.taobao.org/mirrors/node/index.json');
  wget(pkgUri, function (filename, pkg) {
    if (filename === null) {
      return noNpmAndExit();
    }
    //downloadNpmZip(JSON.parse(pkg).version);
    var _pkg = JSON.parse(pkg);
    for(var i = 0,n=_pkg.length;i<n;i++){
       var obj = _pkg[i];
       if(obj.version == binVersion){
           downloadNpmZip(obj.npm);
       }
    }
  });

下面的连接是淘宝的node.js 同步库 ,没有最新版本的Node.js 因此只能安装存在的版本.
http://npm.taobao.org/mirrors/npm

这里我们安装三个版本的 node.js

nvmw install v8.11.4
nvmw install v6.8.0
nvmw install v6.9.2

查看安装版本

nvmw ls

使用其中一个版本node.js/io.js

nvmw use 7.8.0

查看当前node 版本

node -v

这里注意: 如果已经安装过 nodejs 请删除原有的node 环境变量.

二 VUE 构建工具

1 我们保证第一步的node.js 可以正常的使用. 我们安装 vue js 的构建工具:

npm install -g vue-cli

通常在网络情况较好的情况下,使用以上命令创建 构建工具 很快. 但是我们依然可以配置使用国内地址来加快配置速度.

npm  install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global vue-cli

2 我们创建一个vue的项目:
打开cmd窗口: 一行一行敲代码:

   进入E盘:
   创建目录:   ysu_study_vue
   进入 ysu_study_vue
   创建目录    vue-project
   进入  vue-project  

    E: 
	mkdir  ysu_study_vue
	cd ysu_study_vue
	mkdir  vue-project
	cd vue-project # 创建webpack项目  
	vue init webpack ysu_gou_project

这一步,因为版本问题会报错,不用理会,完成后,直接执行下面的两条命令.

    #安装依赖
	cnpm install
	#启动命令
	cnpm run dev

打开vue 的 demo 页面. vue 基础环境搭建完成.

三 vue 开发工具

市面上的vue开发工具很多 ,我使用的是官方推荐的工具 HBuilder . 估计是使用习惯了. 我不用 VSCode .现在很多人喜欢用VSCode开发. 这个自己选择使用那个工具.

HBuilder

https://www.dcloud.io/?hmsr=vuejsorg&hmpl=&hmcu=&hmkw=&hmci=

VScode

https://code.visualstudio.com/