vue3搭建项目的两种方式@vue/cli和vite
vue3搭建项目有两种方式:vite和@vue/cli1、@vue/cli搭建方式见文章:https://blog.csdn.net/qq_40015826/article/details/89249086PS: 使用cli版本需要高于4.5.x//全局安装npm install -g @vue/cli# ORyarn global add @vue/cli//全局卸载npm uninstall
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的开发框架便搭建好了
更多推荐
所有评论(0)