从0-1搭建vue3.0项目

娜样是哪样
589 阅读3分钟

一、引言

vue3.0版本搭建项目官方推荐两种方式，一种是延续vue2.0版本的搭建方式，采用@vue/cli,这种方式与vue2.0版本搭建项目没太大区别，只需要在询问时选择vue3.0版本即可，只是需要注意的是，cli版本需要高于4.5.x。

下面是全局安装、卸载、或者升级@vue/cli的方式：

//全局安装
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,在编译和打包方面都做了优化，下面我们开始使用vite从零开始搭建vue3.0项目。

二、vite搭建vue3.0详细步骤

1. 创建项目

(1) 安装vite前首先检查一下node版本,这里为避免后续项目运行或打包出现问题，将node、npm升级到了最新版本。

image.png

(2) 之后全局安装vite

//全局安装
npm install -g create-vite-app

(3) 创建项目

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

2. 添加路由

(1) 安装路由vue-router对应版本4.x

npm install vue-router@next -S

(2) 在src文件夹下，建router文件夹

//./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
})

(3) components目录下新建 hello.vue

<template>
    <div>
        <h1>hello测试 </h1>
    </div>
</template>

(4) 改写 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')

3. 添加vuex

(1) 安装

npm i vuex@next -S

(2) 在src文件夹下，建store文件夹

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

(3) main.js

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

import FilterSearch from './components/FilterSearch.vue'
const app = createApp(App);

app.use(Router).use(Store);

app.mount('#app');

4. 添加sass

// 安装 style-resources-loader;
vue add style-resources-loader
  
// 安装scss/sass,node-sass sass-loader sass 属于重要依赖，所以需-D而不是-S；
npm install node-sass sass-loader sass -D
  
// 根路径下建立文件vue.config.js
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: []
    }
  }
}

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

<template>
    <div>
        <h1>hello测试 </h1>
        <h1>{{$store.state.msg}}</h1>
    </div>
</template>
<style scoped lang="scss">
$col: blue;
 
h1 {
    color: $col
}
</style>

image.png

5. 引入Element Plus

element -plus 适用于 vue3 element-plus.gitee.io/#/zh-CN/com…

// 安装
npm install element-plus --save
//main.js
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus);

6. koa2搭建服务 mock数据 axios请求数据

(1）创建koa2项目 为方便mock数据，koa2项目可以放在工程目录下

// 1.全局安装koa-generator脚手架
npm install koa-generator -g
  
// 2.创建项目
koa2 mock
  
// 3. 安装mockjs
npm install mock --save
  
// 4.安装依赖
npm install
  
// 5. 启动服务
cd mock
npm start

（2)改写代码 为什么要改写呢？ 一是按原有写法，比较冗余 二是避免下次每增加一个文件都去app.js use一次 不改写也可以

// mock/routes/index.js
const router = require('koa-router')()
const Mock = require('mockjs')
 
const Urls = require('./project')
 
const config = {
  ...Urls
}
 
for (const url in config) {
  if (!config[url].isMock) { continue }
 
  router.get(url, async (ctx, next) => {
    ctx.body = await Mock.mock(config[url])
  })
}
 
module.exports = router
 
// mock/routes 文件夹下新建project.js
const config = {
  '/api/test': {
    isMock: true, // 是否开启mock的开关
    code: 1000,
    message: 'this is test',
    data: {
      'list|10': [{
        name: '@name',
        cname: '@cname',
        city: '@city'
      }],
      page_count: 26
    }
  },
 
  '/api/test1': {
    isMock: true,
    code: '00',
    msg: ''
  }
}
 
module.exports = config
 
// app.js
// 新增
const mockRoutes = require('./routes/index.js')
app.use(mockRoutes.routes(), mockRoutes.allowedMethods())
  
// 删除
const index = require('./routes/index')
const users = require('./routes/users')
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

（3）npm start 启动服务，浏览器根据./bin/ww.js里面设置的端口号访问

（4）安装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');

（5）vite配置本地服务代理

//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:8087',
     changeOrigin: true,
     // rewrite: path => path.replace(/^\/api/, '')
   }
 }
}

(6)选一个页面测试

// 选一个页面测试
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import axios from 'axios'
export default defineComponent({
 setup() {
 const tableList = reactive([]);
 const tableLoading = ref(false);
 const { proxy } = getCurrentInstance();
  
 onMounted(async() => {
   console.log('onmounted')
   proxy.$axios.get('/api/test').then((data) =>{console.log(data)})
  
 })
 return {
   tableList,
   tableLoading
 }
 },
})

至此，vite搭建的vue3.0项目已经出具雏形啦，接下来可以做异步请求封装。 值得注意的是，vue3.0取消了过滤器，可以采用将方法挂载到全局，然后再组件中调用方式替代过滤器。

avatar
文章
阅读
粉丝