从零创建一个Vue项目（1）

最近一直在学习前端，慢慢的向前端靠拢，说到前端，目前最火的的两个框架就属Vue和react，这两个前端前端框架如果想要从事前端开发的小伙伴，就必须要会其中的一个。

而我直接就选择了Vue，这个和我的工作环境有关，作为一个前端的小白，首先要做的从零开始搭建一个Vue项目。

这里我们主要介绍，vue-cli2和cli3的项目创建过程

好了废话多说，开始进入正题

第一步 node.js的安装

前端开发node.js是必不可少的，那什么是node.js呢？

看到Node.js这个名字,初学者可能会误以为这是一个Javascript应用, 事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境。

Node.js是一个后端的Javascript运行环境(支持的系统包括Linux、Windows),这意味着你可以 编写系统级或者服务器端的Javascript代码,交给Node.js来解释执行

想对node.js了解更多的话，大家可以查看下面链接的博客，介绍的很详细，刚开始开发的话，我们不需要会node.js，但是如果我们想要更好的提升自己，进一些大公司node.js就必须要会了，如果没有太高的要求，那么不会node.js也没有关系，我们只需要简单的使用即可。

链接：https://www.jianshu.com/p/6062ee5354be

那么node.js如何下载呢

下载链接：http://nodejs.cn/download/

大家根据个人的电脑寻找对应版本下载即可，由于我使用的是Mac，所以下面的讲解都是基于Mac的安装，前端开发其实Window、Mac没啥太大区别，所以不用纠结如何安装，安装完在向下进行。

第二步 npm 和cnpm（安装）

npm是node.js里面的一个工具，它主要负责的就是node插件管理（包括安装、卸载、管理依赖、包管理等），所以在开发过程中，node.js可以不会但是npm常用的命令我们是必须要会的。

那么npm和cnpm有什么区别呢？

由于npm安装插件是从国外的服务器进行下载，容易受到网络影响，容易出现异常，所以我们淘宝团队分享了使用国内的镜像来代替国外服务器，这样就不会很大程度解决了npm的网络问题，这就是cnpm，除了这里不一样以外，npm和cnpm可以说是一摸一样。

1、这里呢我就使用cnpm，首先我们打开终端，然后输入下面命令开始安装

npm install -gD cnpm --registry=https://registry.npm.taobao.org

2、到这里回撤即可，然后我们就进入等待即可，直到安装完成（下面的内容是命令中每个字母对应的内容）

npm install -gD cnpm --registry=https://registry.npm.taobao.org
这个命令的-g(global)的作用就是全局安装，可以在命令行下直接使用
-D（--save--dev）的作用就是代表环境了，代表的是devDependencies本地环境和线上环境，通常情况下我们都是直接使用D，其实看个人习惯，我习惯是 --save --dev，看着更直观
-S（-save）安装包信息将家在到dependencies（生产阶段）可以理解为线上
在上面的命令行使用-D的话直接在-g后面加上D代表devDependencies

3、出现下图就是开始进行安装，这个过程我们只需要等待即可。

---

4、安装的过程可能会出现下面的报错

这个报错的原因就是没有管理员权限

解决方案：在命令行前面添加sudo获取管理员权限，输入管理员密码就行

例如：

sudo npm install -gD cnpm --registry=https://registry.npm.taobao.org

参考链接：https://blog.csdn.net/shaleilei/article/details/80812410 

到这里，我们就完成了cnpm的安装。

5、完成后我们在终端继续输入

npm -v

查看版本既可。

这里在介绍几个常用命令

//1.卸载原有旧的版本：（如果使用-gD，那么卸载也一定要加上-gD，下面命令同理）
npm uninstall -g cnpm --registry=https://registry.npm.taobao.org

//2.注册模块镜像：
npm set registry https://registry.npm.taobao.org

//3.node-gyp 编译依赖的 node 源码镜像
npm set disturl https://npm.taobao.org/dist

//4.清空缓存
npm cache clean --force

//5.重新安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

参考链接：https://www.jianshu.com/p/c46d1f69a76b 

第三步 Vue-cli的安装(这里包括了，cli2和cli3，我们先处理cli2)

创建纯Vue项目我们就需要Vue-cli做脚手架，搭建项目，Vue-cli的作用就是帮我们直接搭建一个完整的项目框架

vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios。
再加上 vue-cli 就是一个从 路由，数据流管理。
http请求都有的核心项目，vue 社区的丰富资源，也是满足了我们日常开发中的需求了。

vue-cli 这个构建工具大大降低了 webpack 的使用难度，开箱即用的特性，大大降低了我们的学习成本，加快了我们的开发速度。

cli2

1、vue-cli的的安装命令抓有两个，分别对应npm和cnpm

npm install -gD vue-cli

cnpm install -gD vue-cli

如果有需要我们也可以在上面命令-g后面添加d，配置环境也可以，注意：上面的两个命令可能也会出现报错，解决方案和第二步的一样加上管理员权限sudo即可

一共20个步骤，安装完成既可，整个过程0干预

---

cli3 ，它前面的工作都是一样的，到了这里才有区分

1、cli3的安装

sudo cnpm install -gD @vue/cli 

安装过成也是0干预，我们只需要等待 即可，安装过程如下

一共35个包安装完成后效果如下

2、然后我们用命令行查看版本，如果能查询版本号，代表安装成功，注意V要大写

vue -V

第四步 项目创建 (这里包括了，cli2和cli3，我们先处理cli2)

cli2

1、创建项目就一个命令，但是期间可能涉及到开发者参与

vue init webpack projectName

这里webpack就是我们项目的开发模版，vue开发有很多模版，其中webpack是使用最多的，也是主流，这里我们就是webpack

在创建项目的过程中，需要我们的干预，我们主要有两个注意事项

第一个 Install vue-router？（Y/n），是否安装vue-router，这个就是官方路由，主要负责就是我们页面之间跳转、返回等，这里我们直接选择Y即可。

第二个 Use ESLint to lint your code？（Y/n）是否使用ESLint管理代码，ESLint是一个代码风格管理工具，是用来统一代码风格的，一般项目都会使用（尤其是大项目，例如：代码缩紧是一个空格等），但是这里我只是自己学习，这里我就选择N了

2、下面我们就开始创建项目了

1、首先我们在桌面创建一个文件夹，这个文件夹我们就用来专门存放Vue项目，例如名字就叫做：VueProject

2、然后我们通过终端命令进入这个文件夹即可

cd Desktop/VueProject/

3、就是用命令创建项目了

vue init webpack test1

注意，这里可能出现创建项目的失败，那如何解决呢？

就是vue-cli的重新安装即可

cnpm install -gD vue-cli

4、在安装过程中会出现上面说的两个注意点

? Project name jixun //工程名字
? Project description A Vue.js project  //项目描述
? Author wql //作者
? Vue build standalone //默认回撤，
? Install vue-router? Yes  //路由上面的第一点
? Use ESLint to lint your code? No  //代码规范ESLint，第二点
? Set up unit tests Yes //默认回撤，
? Pick a test runner jest //默认回撤，
? Setup e2e tests with Nightwatch? Yes //默认回撤，
? Should we run `npm install` for you after the project has been created? (recommended) npm //默认回撤

剩下的就是等待项目创建完成即可。

---

cli3，创建分为有两种，一种是UI可视化创建，另一种是命令好创建

1、可视化创建

1、命令行输入下面命令

vue ui

2、执行完成会自动打开一个网页进行项目的创建，效果如下

3、这里我们可以根据需求选择

剩下的根据个人需求自行选择，因为是可视化创建项目，所以很简单，相反正是由于可视化他的效率要比命令行的方式低很多，个人推荐命令行设置。

2、命令行  

1、创建项目

vue create project

效果如下，选择内容根据个人选择即可，

2、完成选择后进入等待处理，这里我们0干预

3、当出现下面的效果图，就代表羡慕创建完成

第五步 项目运行(这里包括了，cli2和cli3，我们先处理cli2)

cli2

1、这里项目创建完成后，会自动给我提供两个命令

2、我们根据提示执行即可，按照命令执行完成会给我们提示下面内容

上面说的很明确，就是：你的应用可以在这个链接下运行

所以我们只需要将这个链接粘贴到浏览器运行即可。

3、当出现下面的页面，就说明我们的项目已经创建成功了，并运行了

4、出现这个界面就说明项目已经搭建完成了，我这开发工具使用的是VSCode（Visual Studio Code），而代码目录如下

---

cli3

1、这里项目创建完成后，会自动给我提供两个命令

2、执行完成后，会出现下面效果

这里其实和cli2基本一样，然后我们选择

http://localhost:8080/

3、运行即可，出现下面图片就代表项目已成功运行

4、cli3创建的项目就会更加简介了

到此，一个完整的Vue项目搭建就是彻底完成了，特此记录一下，希望对像我一样的小白有帮助。

总结

其实cli2和cli3说这么多，如果顺利的话实际上就三步

1、sudo npm install -gD cnpm --registry=https://registry.npm.taobao.org

2、cnpm install -gD vue-cl 或者  cnpm install -gD vue-cli

3、vue init webpack projectName 或者 vue ui(可视化安装) 或者 vue create project

这三步完成，其实项目就已经创建完成了 

Vue开发会持续更新。。。，感兴趣的小伙伴可以留意一下