简单上手使用Vue-cli@3.0

之前用过react，没有还使用过vue，今天先简单的把项目架起来~

首先 脚手架先down下来

npm install -g @vue/cli

创建项目，安装依赖

vue create mypro
npm install

最后 使用 npm run serve 启动项目！
页面是不是出来了呢，现在我要一步步修改了

新增几个文件夹；
assets 静态资源
components 公共组件
router 路由
store vuex的数据状态管理文件
styles 公共样式
views 视图文件

image.png

大概先安装这几个依赖吧 （package.json）

 "dependencies": {
   "axios": "0.18.0",
   "element-ui": "^2.4.8",
   "font-awesome": "4.7.0",
   "vue": "^2.5.17",
   "vue-router": "^3.0.1",
   "vuex": "3.0.1"
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "^3.0.5",
   "@vue/cli-plugin-eslint": "^3.0.5",
   "@vue/cli-service": "^3.0.5",
   "babel-plugin-component": "^1.1.1",
   "css-loader": "1.0.0",
   "node-sass": "^4.9.3",
   "sass-loader": "^7.1.0",
   "vue-template-compiler": "^2.5.17"
 },

main.js 是项目的入口文件，主要作用是初始化vue实例并使用需要的插件

import Vue from 'vue'
import ElementUI from 'element-ui' // elementUI引入
import 'element-ui/lib/theme-chalk/index.css' // elementUI引入

import App from './App.vue'
import router from './router'
import store from './store'

import '@/styles/index.scss' // 引入公共样式

Vue.config.productionTip = false
Vue.use(ElementUI); // elementUI引入

new Vue({
  el: '#app', // 与app.vue 保持一致
  router, // 引入路由
  store, 
  render: h => h(App)
}).$mount('#app')

app.vue 是主组件，所有组件的父组件

<template>
  <div id="app">
    <router-view/> // 可以视做一个容器，装要渲染的组件
  </div>
</template>

<script>
  export default{
    name: 'app'
  }
</script>

在router下的index.js我配置了两个路径，"/" 和 “home”

import Vue from 'vue'
import VueRouter from 'vue-router' // 我下的可能不是最新版本的，最新可能是Router 注意上下文保持一致

Vue.use(VueRouter)

export const constantRouteMap = [
 {
   path: '/',
   component: () => import('@/views/hello/index'),
   hidden: true
 },
 {
   path: '/home',
   component: () => import('@/views/login/index'),
   hidden: true
 }
]

export default new VueRouter({
 scrollBehavior: () => ({ y: 0 }),
 routes: constantRouteMap
})

根路径下 '/' my-pro\src\views\hello\index.vue

image.png

HelloWorld.vue

image.png

一个简单的页面就出来了，可以继续开发了

image.png