Vue脚手架

Vue-cli

用于生成工程化的Vue项目

npm install -g @vue/cli

基于vue-cli快速生成Vue项目

vue create 项目的名称  #在需要创建项目的文件夹目录下

Vue中的组件化开发

vue是一个支持组件化开发的前端框架

组件的后缀名是.vue App.vue为根组件

Vue项目的运行流程

Vue通过main.js把App.vue渲染到index.html的指定区域内

App.vue用来编写待渲染的模板结构

index.html中需要预留一个el区域

main.js把App.vue渲染到了index.html所预留的区域中

Vue组件构成三部分

template 组件的模板结构

script 组件的javascript行为

style 组件的样式

Vue组件中的script

与Vue实例不同，Vue组件中的script有固定写法

export default {
	// data数据源 组件中的data不能指向对象
	// 组件中的data 必须是写成一个函数返回一个对象的形式 而且不能是箭头函数
	// 确保每一个组件都能得到一个组件独立的维护的data
	data(){
		//return出去的对象中可以定义数据
		return {
			username: 'admin'
		}
	},
	methods:{ //code },
	watch:{ //code },
	computed:{ //code },	
	filters:{ //code },
}

其他属性写法与Vue实例中相同，只有data必须是一个函数

Vite

使用Vite脚手架创建项目

npm创建

npm init vite-app <projecct-name>
cd <projecct-name>
npm install
npm run dev

yarn创建

yarn create vite-app <projecct-name>
cd <projecct-name>
yarn 
yarn dev

yarn创建（new）

npm init @vitejs/app
# 输入配置
cd <projecct-name>
yarn 
yarn dev

Vite集成sass

Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。

没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

Vite配置@路径

npm install --save-dev @types/node

修改vite.congfig.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

/************************************* 路径配置 start ********************************/
import { resolve } from 'path' 

const pathResolve = (dir) => {  
  return resolve(__dirname, ".", dir)          
}

const alias = {
  '@': pathResolve("src")
}
/************************************* 路径配置 end ********************************/
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  },          // ****************** 路径配置新增
  // 省略文件后缀
  extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
})

Vite集成vue-router

npm install vue-router@4 

// index.js

// 引入需要的模块
import { createRouter,  createWebHistory } from 'vue-router'

// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
    {
        path: '/',
        redirect: 'login'
    }, 
    {
        path: '/login',
        // 已经配置了路径别名，@/view 就可以写成 view
        // 配置了extensions，login.vue可以写成login
        component: () => import('views/login/login') 
    },
    {
        path: '/home',
        component: () => import('views/home/home')
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 引入路由
import router from './router'
// 使用路由
const vue = createApp(App)
vue.use(router)
vue.mount('#app')

Vite集成vuex

npm install vuex@next --save

import { createStore } from 'vuex'
 
const store = createStore({
  state: {
    userInfo: {
      name:'myName'
    }
  },
  mutations: {
    getUserInfo (state, name) {
      state.userInfo.name = name
    }
  },
  actions: {
    asyncGetUserInfo ({ commit }) {
      setTimeout(() => {
        commit("getUserInfo", +new Date() + 'action')
      },2000)
    }
  },
  getters: {
  
  }
})
 
export default store

Vite集成element-plus

npm install element-plus --save

//1完整引入elementui plus 3
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//2按需引入
// import {ElementPlus} from 'element-plus'
// import 'element-plus/dist/index.css'

export default  function(app){
    //1完整引入elementui plus 3
    app.use(ElementPlus)

    //  //3按需引入
    //  app.use(ElementPlus)
}