vue3搭建项目的两种方式@vue/cli和vite

vue3搭建项目有两种方式：vite和@vue/cli

一、@vue/cli搭建方式

见文章：https://blog.csdn.net/qq_40015826/article/details/89249086
PS: 使用cli版本需要高于4.5.x

//全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
//全局卸载
npm uninstall -g vue-cli
# OR
yarn global remove vue-cli
//升级cli
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
//查看本机cli版本
vue --version

二、vite搭建方式

1、全局安装

npm install -g create-vite-app

2、创建项目

//新建项目
create-vite-app vite-vue3
//进入目录
cd vite-vue3
//安装依赖
npm install
//运行
npm run dev

运行了一个最基本的项目，但是不包括vue-router、vuex、scss等，目录如下：

3、添加路由

（1）安装对应版本的路由

npm install vue-router@next -S

（2）在src文件夹下，建立router文件夹，建立index.js文件

• ./src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  {
    path: '/',
    name: 'Hello',
    component: () => import('../components/hello.vue')
  }
]
export default createRouter({
  history: createWebHistory(),
  routes
})

• components目录下新建 hello.vue

<template>
    <div>
        <h1>hello,你好啊 </h1>
    </div>
</template>

• 改写 App.vue main.js

// App.vue
<template>
  <router-view></router-view>
</template>
 
<script>
export default {
  name: 'App',
  components: {}
}
</script>
  
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import './index.css'

createApp(App).use(Router).mount('#app')

4、添加vuex

（1） 安装

npm i vuex@next -S

（2）在src文件夹下，建store文件夹

// ./src/stroe/index.js
import { createStore } from 'vuex';
 
export default createStore({
  state: {
    msg: 198
  },
  mutations: {},
  actions: {},
  modules: {}
})

(3) main.js

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import Store from './store'
import './index.css'

createApp(App).use(Router).use(Store).mount('#app')

5、添加sass

// 安装scss/sass,node-sass sass-loader sass 属于重要依赖，所以需-D而不是-S；
npm install node-sass sass-loader sass -D

最后，修改hello.vue试一下效果

<template>
    <div>
        <h1>hello,你好啊</h1>
        <h1>{{$store.state.msg}}</h1>
    </div>
</template>
<style scoped lang="scss">
$color: yellow;
h1 {
    color: $color;
}
</style>

6. 引入Element Plus

element-plus 适用于 vue3
https://element-plus.gitee.io/#/zh-CN/component/installation

// 安装
npm install element-plus --save

7、 koa2搭建服务 mock数据

（1）创建koa2项目

// 1.全局安装koa-generator脚手架
npm install koa-generator -g
  
// 2.创建项目
koa2 mock

// 3.进入文件夹执行安装依赖
cd mock
npm install

// 4. 继续安装依赖文件
npm install mockjs --save -dev //mock文件，模拟后端数据
npm install koa2-cors --save -dev //node端配置cors支持跨域用
  
// 5.配置app.js文件 注意下面注释的新增部分就是在本来app.js文件上面新增的东西
 const Koa = require('koa')
 const app = new Koa()
 const views = require('koa-views')
 const json = require('koa-json')
 const onerror = require('koa-onerror')
 const bodyparser = require('koa-bodyparser')
 const logger = require('koa-logger')
 const cors = require('koa2-cors')              // 新增部分处理跨域
 
 const index = require('./routes/index')
 const users = require('./routes/users')
 // error handler
 onerror(app)
 // middlewares
 app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
 }))
 app.use(cors())                                // 新增部分处理跨域
 app.use(json())
 app.use(logger())
 app.use(require('koa-static')(__dirname + '/public'))

// 6.正式使用mock 我这里直接在routes/index.js里面使用
const router = require('koa-router')()
const Mock = require('mockjs')       // 引用mockjs

const mockGetMap = {
  "/api/test": {
    code: 0,
    msg: "success",
    data: [
      {
        username: "1111",
        email: "123@123.com",
        mobile: 1888888888,
        status: 1,
        createTime: "2022-04-01 12:00:00"
      }
    ]
  }
}
for(let i in mockGetMap){
  router.get(i, async (ctx, next) => {
    ctx.body = await Mock.mock(mockGetMap[i])
  })
}

module.exports = router

//7.启动node
npm run dev

（2）启动服务，浏览器按照./bin/www 里面设置的端口号访问（如：8070）

在浏览器访问 http://127.0.0.1:8070/api/test 即可返回访问内容

8、安装axios

// 安装依赖
npm install axios -S
  
// main.js 挂载全局方法
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(Router).use(Store).use(ElementPlus).mount('#app');

9、vite配置本地服务代理，vite.config.js

const path = require('path')

module.exports = {
 alias: {
 // 键必须以斜线开始和结束
 '/@/': path.resolve(__dirname, './src')
 },
 hostname: '127.0.0.1',
 port: 8080,
 // 是否自动在浏览器打开
 open: true,
 // 是否开启 https
 https: false,
 // 服务端渲染
 ssr: false,
 /**
 * 在生产中服务时的基本公共路径。
 * @default '/'
 */
 base: './',
 /**
 * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
 * @default 'dist'
 */
 outDir: 'dist',
 // 反向代理
 proxy: {
     '/api': {
         target: 'http://localhost:8070',
         changeOrigin: true,
     }
 }
 }

这样，一个基于vue3.0的开发框架便搭建好了