vue创建项目基本点

vue创建新项目

1. 下载node, node官网 node -V来检查是否安装成功
2. 创建一个新文件夹，并用vscode打开
3. 安装vue cli,打开terminal 或者 cmd 界面。运行 npm install -g @vue/cli vue--versin 来检查vue cli是否已正确安装
4. 创建项目 vue create 项目名称, 例如 vue create my-demo1 安装过程中可以选择vue2 还是 vue3
5. 完成后可以启动项目，cd my-demo1, 再npm run serve
6. 使用Vue Router添加路由 创建项目时是vue2就 npm install vue-router@3

• 创建src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import WebHome from '../components/WebHome.vue';
import ComponentA from '../components/ComponentA.vue';
import ComponentB from '../components/ComponentB.vue';
Vue.use(VueRouter);
const routes = [
  {
    path: '/', //一级路由需要'/'
    name: 'WebHome',
    component: WebHome,
    children: [ 
      {
        path: 'ComponentA', //二级路由不需要'/'
        name: 'ComponentA',
        component: ComponentA,
      },
      {
        path: 'ComponentB',
        name: 'ComponentB',
        component: ComponentB,
      }
    ]
  }, 
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
export default router;

• main.js(使用element 和 router)

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import router from './router' //路由

Vue.config.productionTip = false
Vue.use(ElementUI);

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

• 使用路由

<router-link to="/ComponentA" style="text-decoration: none;">选项a</router-link>
<router-view></router-view>

7. 普通组件

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <menu-aside></menu-aside>
      </el-aside>
      
      <el-main>
        <menu-main></menu-main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MenuAside  from './MenuAside.vue'
import MenuMain  from './MenuMain.vue'
export default {
  name: 'WebHome',
  components: {
    'menu-aside': MenuAside,
    'menu-main': MenuMain,
    }
}
</script>
<style>
</style>

8. App.vue

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

9. vue项目中使用element

• 1.下载 npm install element-ui --save
• 2.引入(main.js中)，同6点中的main.js