vue cli3 搭建项目 使用vue-router 以及 element-ui

搭建vue项目,(node和git 首先要下载)
1.首先根据vue官网 Cli的说明,快速搭建。
cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run serve 将项目跑起来。
2.vscode打开项目,可以看到目录,首先在src下创建views文件夹,在里面继续创建两个文件夹,
分别是login和comment(个人习惯),在这两个文件夹中新建文件,login.vue和home.vue(也是个人习惯)。
3.vue项目中使用了vue-router,所以请在控制台上下载,(命令是:npm i vue-router),接着在src下
继续创建router文件夹,文件夹中创建文件,router_index,js用来写路由。具体的代码是:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import index from '../App.vue'
import Login from '../views/login/login.vue'
export default new Router({
  routes:[{
    path: '/',
    name: 'index',
    component: index,
    children:[{
      path: '',
      name: 'login',
      component: Login
    }]
  }]
})
4.将router_index引入到main.js中
import router from './router/router_index'
new Vue({
  router,   //将router开放出去
  render: h => h(App),
}).$mount('#app')
5.将App.vue中的示例代码删掉,在div中写<router-view/>
6.login.vue中写模板,(sca第一个吧应该是,回车就可以),div中写点东西测试!
7.如果项目中使用的是element-ui ,首先安装npm i element-ui
安装完成以后,在main.js文件中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
之后就可以在项目中使用这个ui框架了

8.如果使用less  下载命令npm i less less-loader

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值