从0.1开始学习创建一个vue项目

此时已经安装完node、npm、vue脚手架以及vscode和它好用的插件

一、项目构建

1.选择存项目的文件夹

2.vue create 项目名称

3.npm run serve

package.json中写了运行命令

4.更改端口

vue.config.js中修改内容需要重启项目才生效

//vue.config.js
module.exports = {
  devServer: {
    port: 8888,
  }
}

二、安装组件和框架

安装完之后还需要在main.js中配置一下，这里写的现在我还不懂我看文档这么写的，后期复习如果看不明白去看对应的官方文档

1.vue-router

npm install vue-router@3.5.2

这里我使用的vue版本是2.6.14对应的vue-router的版本也不能太高，因为没规定版本安装之后报错了

2.element-ui

3.node-sass、sass-loader

node-sass的版本是4.14.1      sass-loader的版本是8.0.2

安装这个是为了组件样式独立，版本为啥是这样的我忘记了，上个项目是这样的我就也安装了这个版本

4.echarts

三、组件的使用

1.vue-router

忘记在main.js中引入router会导致报错！！!

TypeError: Cannot read properties of undefined (reading ‘matched‘)“

//main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import VueRouter from 'vue-router'
import router from './router'

Vue.use(ElementUI);
Vue.use(VueRouter);

Vue.config.productionTip = false

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

根组件App.vue中需要写router-view(路由的出口) 

//App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style></style>

 router/index.js中配置路由

//index.js
import VueRouter from 'vue-router'
const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/home.vue')
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('@/views/about.vue')
    },
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router

 2.element-ui