在本机搭建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里改成这样

　　　　<router-view/> //这里将视图加在这里

　　</div>

</template>

　　export default {

　　　　name: 'app'

　　}

</script>

至此，vue-router就引到项目中来了，可以随意的在router文件的index.js中配置路由了

后面会有一些关于vue-cli3的一些其它应用，我正在学习中，希望会对大家有所帮助

秒客网

在本机搭建vue-cli3项目

相关文章