Vue-CLI 4 搭建Vue项目

一、Node.js安装

到Node.js官网（https://nodejs.org/zh-cn/）上，下载并安装Node.js，选择【长期维护版】即可

使用安装包安装，选择安装路径可以根据自己的需要改一下（比如我安装在了D:\Environment\nodejs\目录下）。

这个Necessary Tools的选项可以勾选上。

其他基本一路直接【Next】即可。

安装完成后，在cmd窗口输入node -v，可查看到node的版本号，即安装成功。

二、Vue-Cli安装

打开cmd窗口，输入npm config set registry http://registry.npm.taobao.org设置npm指令使用淘宝镜像

输入npm install -g @vue/cli来安装Vue-Cli

三、Vue项目创建

1、项目创建

选取好自己项目想要放置的文件夹，比如我这里选择了D:\Mywork

在选好的目录下，在目录栏中输入cmd按下回车，呼出cmd窗口

输入vue create model-proj创建Vue项目（model-proj为项目名，可以根据自己需要更改）

一直按回车键以创建项目

创建完成后使用命令cd model-proj跳转到项目目录，先不要关闭cmd窗口，为项目导入依赖时将会用到。

将创建完成的Vue项目使用自己的相关IDE打开（如：HBuilderX、VS Code）

在cmd窗口、项目目录下输入npm run serve运行项目，检查项目是否能成功运行

测试完成后，回到cmd窗口，多次按下Ctrl+C停止项目运行，以便我们后续导入项目相关依赖

2、项目依赖导入

2.1 vue-router（路由）

在cmd窗口、项目目录下，输入命令npm install vue-router --save，导入vue-router的依赖

3、项目配置

3.1 router.js（路由配置）

在项目的src目录下创建pages目录，然后创建相应的测试页面test.vue

在项目的src目录下创建文件router.js

配置路由文件router.js将测试页面test.vue引入，内容如下：

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let router = new Router({
	routes: [{
		path: '/',
		name: 'test',
		component: () => import('./pages/test.vue')
	}]
})

export default router

修改src/main.js文件，为项目引入路由router

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

3.2 vue.config.js（Vue配置选项）

由于Vue中eslint检测比较强，可能导致一些不必要的报错，这里我们选择关闭eslint.

修改项目中的vue.config.js文件如下：

module.exports = {
	lintOnSave: false,
}

4、测试效果

修改项目中的src/App.vue文件如下：

<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>

<script>
	export default {}
</script>

<style>
</style>

在测试页面test.vue中随便写入一些内容，代码如下：

<template>
	<div>
		<h1>测试………………</h1>
	</div>
</template>

<script>
</script>

<style>
</style>

接下来我们开始运行项目观察测试效果。在cmd窗口、项目目录下，输入npm run serve启动项目

打开浏览器进入相关测试网页，我们发现项目环境搭建完成

想要练手、学习什么的，就可以顺着这个项目往下继续做了