[JavaScript知识库]从零搭建vue项目

一、创建vue项目三种方法

• vue ui

? ? ? ?vue-cli3.x创建Vue项目的方式，通过操作可视化页面来创建和管理

• vue init webpack 项目名

? ? ? ?vue-cli2.x创建Vue项目的方式，可以使用github上面的一些模板来初始化项目

• vue create 项目名（推荐）

? ? ? ?vue-cli3.x创建Vue项目的方式，自由配置选项

? ? ??

如需关闭eslint检查，在vue.config.js配置

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false // 添加这行
})

二、配置路由

1.下载vue-router（手动配置情况下）?

? ?注意vue2.0对应版本3，vue3.0对应版本4

npm i vue-router@3

2.main.js引入依赖

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from "vue-router"

Vue.use(VueRouter)
Vue.config.productionTip = false

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

3.src下创建路由文件夹router/index.js,并配置路由规则

import VueRouter from "vue-router"
const router = new VueRouter({
    routes: [
        {
            path:'/',
            redirect:'/home'  // 重定向到home组件
        },
        {
            path:'/home',
            component: () => import('../pages/Home/index.vue') 
        },
    ]
})
export default router;

4.App.vue主页面添加路由展示位置

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

三、按需引入elementUI

1.下载

npm i element-ui

npm install babel-plugin-component -D

2.配置babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.main.js按需引入

import { Button, Select } from 'element-ui'

Vue.use(Button)
Vue.use(Select)

四、安装less和lessloader

npm install less less-loader --save-dev

五、使用一般组件

1. src/components下创建.vue文件

2.1 全局引入（main.js)

? ? ? 直接使用，vue会自动在父组件引入，不用每次手动引入

import targetCard from './components/target-card.vue'

Vue.component(targetCard)

2.2 局部引入? (父组件）

import targetCard from '@/components/target-card.vue'

export default {
  components: { targetCard }
}

3.使用组件

<target-card></target-card>