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

vue cli3 搭建项目使用vue-router 以及 element-ui相关推荐

Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
【vue create】一.使用vue creat搭建项目
场景:使用vue create脚手架快速搭建vue的项目前提:需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 1.使用d ...
Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
vue cli3.x 项目中引入 vux（一）：手动配置
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下: 建议 node.js 版本在 7.6.0 以上. 1.引入vux # npm instal ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable
该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com
EasyUI框架是我本科时候后端开发的一个前端框架,用起来比较方便,缺点就是风格.颜色.主题不太行,但是现在济南的很所公司还用easyui开发呢!!本文主要在这里记录一下主要的配置情况,对程序员来说, ...

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