部署Vue3项目

部署Vue项目

下载项目

1. 安装vue3 npm install -g @vue/cli(3.6.0)
2. vue -version 测试 版本
3. 控制台 cd 到项目存放地址
4. vue create [项目名]

配置项目

• https://www.jianshu.com/p/5fc3c576a33d 配置文件（要勾选路由！！）

  安装饿了么UI

  https://blog.csdn.net/ybilss/article/details/107763027

1. 安装饿了么UI（npm i element-ui -S)

2. vue ui 安装插件

3. 在vue项目的 babel.config.js文件中增加如下JSON

   //覆盖原来的文件
   "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ]
       ]
   

   //实例Vue代码
   <template>
     <div id="app">
       <div id="toolbar-container" class="toolbar"></div>
       <p>标题</p>
       <div id="text-container" class="text"></div>
       <el-button>默认按钮</el-button>
     </div>
   </template>
   
   <script>
   
     import E from 'wangeditor';
     export default {
       name:"About",
       data() {
   
         return {
           editor: null,
         };
       },
       methods:{
         initEditor(){
           // 创建编辑器
           this.editor = new E('#toolbar-container', '#text-container') // 传入两个元素
           
           this.editor.create()
         }
       },
       mounted() {
         this.initEditor()
       },
       beforeDestroy() {
         // 销毁编辑器
         this.editor.destroy()
         this.editor = null
       }
   
     }
   </script>
   

4. 安装npm install babel-plugin-component -D

5. import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   
   Vue.config.productionTip = false
   
   import './plugins/element.js'
   
   
   new Vue({
   
     router,
     render: h => h(App)
   }).$mount('#app')
   

6. //element.js
   import Vue from 'vue'
   import Element from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(Element)
   

安装路由

index.js文件配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from "../views/About";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name:'About',
    component: About
  }
]

const router = new VueRouter({
  mode:'history',
  routes
})

export default router

<template>
  <div id="app">

      <el-button @click="toAbout">toAbout</el-button>
    <router-view></router-view>//关键
  </div>
</template>

安装wangeditor

安装：npm i wangeditor --save