Vue3 从零搭建项目及插件的使用

node：v14.16.1
vue：@vue/cli 4.5.12

完整代码

：https://download.csdn.net/download/weixin_44590591/76857668

1、项目初始化

1.1、项目前期需求

//使用Vue3，需要升级vue-cli，全局安装最先版本@vue/cli；
npm install -g @vue/cli@next
// 安装成功后输入,显示，安装成功
 vue -V    //@vue/cli 4.5.12
 

1.2、安装成功后搭建Vue3项目

vue create myproject

1.3、 启动服务

cd myproject  //进入文件
npm run serve // 运行项目

1.4、项目文件列表

├─.gitignore
├─ .git
├─ node_modules
├─public
|   ├─favicon.ico
|   └index.html
├─src
|  ├─App.vue
|  ├─main.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md

2、配置PostCSS

PostCSS 插件转换 CSS 代码的工具,增加代码的可读性。
利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。
Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
2.1 安装 postcss、postcss-loader、autoprefixer插件

//autoprefixer使用9.8.6版本主要是与postcss的兼容性问题，autoprefixer默认使用最新版本
npm i postcss postcss-loader autoprefixer@9.8.6 -D

注意：该安装是安装当前最新版本的，我这边报了如下错*

原因： less-loader安装的版本过高
解决方案：卸载重新安装

npm uninstall less-loader
npm install less-loader@6.0.0

2.2 myproject项目下创建postcss.config.js文件；

// postcss.config.js
module.exports = {
    plugins: [
        // 配置 Autoprefixer 插件
        require('autoprefixer')({
            // 游览器最近的两个版本
            'overrideBrowserslist': ['last 2 versions']
        })
    ],
};

2.3 在App.vue 中输入下面代码，重新运行：

<template>
  <div>配置PostCSS</div>
</template>

<script>
  export default {
    name: 'App',
    components: {}
  }
</script>

<style scoped>
  div {
    display: flex;
  }
</style>

2.4 通过浏览器查看
配置前：

配置后：

3. 配置Css 预处理语言 —— Sass

3.1、安装 Sass;

npm install sass sass-loader -D

//注：该安装是安装当前最新版本的，我这边报了如下错

原因： sass-loader安装的版本过高
解决方案：卸载重新安装

npm uninstall sass-loader
npm install sass-loader@9.0.0

3.2 App.vue中使用Sass；

<template>
  <div>配置PostCSS</div>
</template>

<script>
  export default {
    name: 'App',
    components: {}
  }
</script>

<style lang="scss" scoped>
  $color: red;

  div {
    display: flex;
    color: $color,
  }
</style>

4、 配置UI组件库

这里以 ant-design-vue 和 element 为安装示例，你可以按需求安装组件库
4.1、ant-design-vue@next,ant-design-vue组件已经支持 Vue3

npm i ant-design-vue@next -D
npm install element-plus --save

import {
  createApp
} from 'vue'
import router from './router/index.js'
import App from './App.vue'

import Antd from 'ant-design-vue'

// 导入element-plus和样式文件
import Element from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
// 全局组件库
app.use(Element)
app.use(Antd)
app.use(router)
// 挂载视图放在最后一步
app.mount("#app")

4.2 在页面中引入两个UI组件

<template>
    <!-- 注意：我这里是Vue3，所以最外层没有套一个div盒子 -->
    <!-- element-plus -->
    <h1>element-plus：</h1>
    <el-row class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
    </el-row>


    <!-- ant-design-vue -->
    <h1>ant-design-vue：</h1>
    <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
        <a-button type="primary" ghost>Primary</a-button>
        <a-button ghost>Default</a-button>
        <a-button type="dashed" ghost>Dashed</a-button>
        <a-button danger ghost>Danger</a-button>
        <a-button type="link" ghost>Link</a-button>
    </div>

</template>

<script>
  export default {
    name: 'about',
    components: {}
  }
</script>

<style lang="scss" scoped>
  $color: red;

  div {
    display: flex;
    color: $color,
  }
</style>

5、路由配置： vue-router

5.1 安装

npm install vue-router@next --save

5.2 安装成功后，在src中创建views 文件夹，并且创建两个文件，文件名字根据需求创建
home.vue

<template>
    <div> home页面</div>

</template>
<style scoped>
    div {
        font-size: 60px;
    }
</style>

about.vue

<template>
    <div>about页面</div>
    <!-- <router-view></router-view> -->

</template>
<style scoped>
    div {
        font-size: 60px;
    }
</style>

5.3 路由文件配置：在src中新建router 文件夹，并且创建index.js文件如下：

// 导入路由模块
import {
    createRouter,
    createWebHashHistory,
} from 'vue-router'
// 定义路由规则
const Home = ()=> import('./../views/home.vue')
const About = ()=> import('./../views/about.vue')

const routes = [
     {
        path: '/',
        redirect: '/home'
    },{
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
   
]
export default createRouter({
    // 引用路由规则
    routes,
    // 指定路由模式，
    history: createWebHashHistory(),
});

5.4 main.js 中引用 vue-router;

//main.js
import router from './router/index.js'
...
app.use(router)

5.5、页面路由跳转
app.vue

<template>
	<!-- 跳转对应的路由 -->
  <div>
    <router-link to="/home">home</router-link>
  </div>
  <div>

    <router-link to="/about">about</router-link>
  </div>
  <router-view></router-view>
  <!-- 路由嵌套 -->

</template>

<script>
  export default {
    name: 'App',
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  $color: red;


  div {
    display: flex;
    color: $color;
    font-size: 14px;

  }
</style>