vue-cli3 创建项目 从0到1

因为已经大号了前端的环境

所以：

 node -v 检查node版本

vue -V 检查vue版本

创建名称为 zero_to_one的项目

执行：   vue create zero_to_one

选择配置，看个人项目需求
注意，空格键是选中与取消，A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

装好后，启动

 $ cd zero_to_one   // 进入到项目根目录
 $ npm run serve // 启动项目

 

安装  element-ui

npm install element-ui

.安装后我们应先在main.js中引入element相关的内容

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在页面放入

<el-button type="primary">主要按钮</el-button>

展示出来  就是成功！

 

立成文件

先安装     npm install vue-router --save

新建router 文件夹

index.js 文件

 

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

/**
 * constantRoutes 固定路由，不需要i鉴权，任何角色都可以访问
 * a base page that does not have permission requirements
 * all roles can be accessed
 */

export const constantRoutes = [
    {
      path: '/login',
      component: () => import('@/views/login/index'),
    },
   
  ]

const createRouter = () => new Router({
    routes: constantRoutes
})
const router = createRouter()
export default router

 

 

然后再main.js 文件引入

import Vue from 'vue'
import App from './App.vue'

import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 

路由封装完成

值得注意的是

new Router({

    routes: constantRoutes

})

 

里面的routes   不能写错    我写成routers   一直找不到路由  也不报错