正文
在本机搭建vue-cli3项目
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue-cli3官方网址：
https://cli.vuejs.org/zh/
由于公司开始一个新项目，用到的是vue-cli3搭建的项目，所以自己想搭建一个项目，今天搭建的项目就是一个很简单的项目，没有自己配置的项目，我的目的是想把步骤记录下来，一是当做自己的一个笔记，而是，对初学者来说，看到这些笔记会更容易上手一些，不过随着以后用的多，我还会继续更新进一步的东西，今天主要来记录一下，怎么在本机上搭建vue-cli3项目原型，其次怎么引进vue-router，话不多说，开始！
准备工作，安装node，安装git，不过今天的工作没用到git，这两个安装都是傻瓜式安装，不过多记录
1、首先在本地建一个文件夹，用来盛放项目，例如myProject
2、window键+r 输入cmd 打开终端
3、cd 到新建的文件夹 输入命令
npm install -g @vue/cli 这是安装vue脚手架
4、创建一个项目
vue create my-project
5，将项目拖到编辑器，打开终端，cd到 my-project项目 安装一下项目依赖包
npm install
6、运行此项目
npm run serve
运行完之后 按ctrl键 点击
- Local: http://localhost:8080/
- Network: http://192.168.0.113:8080/
就会弹出项目的主页面
将页面的内容删除一下，方便自己网上写内容 至此一个最原始的vue-cli3项目框架就被搭建起来了
接下来，我们会发现，vue-cli3搭建起来的项目并没有vue-router插件，下面记录一下怎么把vue-router插件引进来
首先给一个官方的vue-router网址：https://router.vuejs.org/zh/guide/#html 里面有许多api可以多研究一下
1、首先安装vue-router插件
npm install vue-router
2，在src目录先建立一个router文件，里面建立一个index.js，用来配置路由
index.js里的内容：
import Vue from 'vue'
import Router from 'vue-router' //引入vue-router
import HelloWorld from '../components/HelloWorld.vue' //引入HelloWorld页面
Vue.use(Router)
export default new Router({
routes: [
{//设置默认路由为HelloWorld页面
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2、将router的配置引到项目中来，在main.js中设置
import Vue from 'vue'
import App from './App.vue'
import router from './router' //将router配置引进来
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router //将router配置添加到vue实例
}).$mount('#app')
3、在app.vue里改成这样
<template>
<div id="app">
<router-view/> //这里将视图加在这里
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
至此，vue-router就引到项目中来了，可以随意的在router文件的index.js中配置路由了
后面会有一些关于vue-cli3的一些其它应用，我正在学习中，希望会对大家有所帮助
