文章目录

一、Node.js安装二、Vue-Cli安装三、Vue项目创建1、项目创建2、项目依赖导入2.1 vue-router（路由）3、项目配置3.1 router.js（路由配置）4、测试效果

一、Node.js安装

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

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

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

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

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

二、Vue-Cli安装

打开cmd窗口，输入npm config set registry http://registry.设置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.jsimport 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.jsimport Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),}).$mount('#app')

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启动项目

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

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