vue.js系列之（一）—— vue项目的搭建

由于现在的Vue脚手架已经升级到3.x版本，即vue-cli3。脚手架升级之后，安装的命令也随之发生了改变：npm install -g @vue/cli

1.准备工作

1.安装node.js和npm

Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。我们可以直接到node.js官网下载，然后像安装普通软件一样安装node.js。

npm是node的包管理工具，我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。
node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node -v和 npm -v来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。

2.安装淘宝镜像

为什么要安装淘宝镜像呢？因为我们使用npm来搭建脚手架的时候，是从国外的npm服务器上下载需要的文件，这就导致下载过程会很漫长。如果我们安装了淘宝镜像，就可以从国内的镜像服务器下载搭建脚手架所需的文件，可以很快的完成下载任务。

我们在cmd窗口中输入以下命令来安装淘宝镜像。安装完成之后，我们可以使用命令 cnpm -v来查看其版本，如果能够显示版本说明安装成功

1| npm install -g cnpm --registry=https://registry.npm.taobao.org

完成之后，我们就可以用cnpm命令代替npm命令来安装依赖包了。

2.安装脚手架并使用脚手架创建项目

因为我们使用的是最新的脚手架3版本—webpack 4,所以需要用以下命令来安装

cnpm install -g @vue/cli

安装完成之后，我们可以使用 vue -V命令来查看vue的版本，如果成功显示版本号，说明已经安装成功，注意 vue -V中使用大写字母V。成功之后就继续执行下列命令创建项目

vue create myapp  //通过命令安装
vue ui //可视化安装

当安装完成之后整个项目的目录就一目了然了，现在我们可以分析一下目录结构：

-node_modules // 项目需要使用的依赖文件 
-public // 静态资源文件 
-src // 我们的主场 
-tests // 测试 .browserslistrc // 浏览器版本的设置 使用最新的版本 
.editorconfig // 编辑器的设置 
.eslintrc.js // 代码格式校验 
.gitignore // git的忽略文件 
babel.config.js // babel配置文件 
cypress.json // 测试的插件配置 
package.json // 项目的一个描述的文件 
postcss.config.js // css的配置 
README.md // 项目说明

当然除了这些还有src目录结构：

-src
-assets // 静态资源的文件
-components // 项目中需要的组件
-views // 应用中的页面 （路由找页面，页面找组件）
App.vue // 总页面
main.js // 入口逻辑文件 --- 视图绑定到元素上
registerServiceWorker.js // 上线执行的一个文件
router.js // 路由
store.js // 状态管理器

成功创建项目之后，我们可以修改项目文件夹里的package.json

"scripts": { 
	"serve": "vue-cli-service serve", 
	"dev": "cnpm run serve",  //这是后续添加的
	"build": "vue-cli-service build", 
	"lint": "vue-cli-service lint", 
	"test:e2e": "vue-cli-service test:e2e",
	"test:unit": "vue-cli-service test:unit" 
}

在没添加之前我们可以使用 cnpm run serve来运行项目
添加这条语句之后我们就可以使用 cnpm run dev命令来运行项目

3.项目成功运行

项目搭建完成后，我们需要输入 cnpm run dev来测试我们的项目是否能够成功运行，当终端控制台提示成功之后，我们在浏览器中输入http://localhost:8080成功之后显示的就是这个页面

最后在这个基础之上我们就可以开始对我们的项目进行编写和开发了，后期我还会陆续更新一些在项目开发中遇到的一些问题，以及怎样去编写一个好的项目，还有开发的流程以及开发思路之类的文章。未完待续…

4.push

在上面的教程中，我们首先安装的是Vue脚手架（即vue-cli）。Vue脚手架就是一个工具，是用来帮助我们快速搭建Vue项目的工具，希望大家不要把这Vue脚手架和Vue项目搞混淆。