导读
VUE 3.0出来有段时间，借助年底这段时间不怎忙，摸会鱼，开始学习VUE 3.本文主要从项目搭建到项目实战，一步步的学习Vue3的项目搭建以及一些插件及库的使用，减少入坑。
版本
节点v12.16.2
npm 6.14.9
完整的包装。js上
{ "name": "vue3-demo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "ant-design-vue": "^2.0.0-rc.5", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "postcss": "^8.2.1", "postcss-loader": "^4.1.0", "sass": "^1.30.0", "sass-loader": "^10.1.0", "vuex": "^4.0.0-rc.2" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ]}
{
"name": "vue3-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"ant-design-vue": "^2.0.0-rc.5",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"vuex": "^4.0.0-rc.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
1、初始化项目
1.1、使用Vue3，需要升级vue-cli，多个安装最先版本@ vue / cli；
npm install -g @vue/cli@next
npm install -g @vue/cli@next
1.2、安装成功后输入，显示，安装成功
$ vue -V@vue/cli 4.5.4
$ vue -V
@vue/cli 4.5.4
1.3、安装成功Vue cli 4，使用以下命令创建vue3项目；
vue create vue3-demo
vue create vue3-demo
运行：在手动选择功能输入Vue 3选择vue3版本；
? Please pick a preset: (Use arrow keys)> true ([Vue 2] dart-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypress) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features Vue 3
? Please pick a preset: (Use arrow keys)
> true ([Vue 2] dart-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypr
ess)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features Vue 3
1.4、启动服务
cd vue3-demo //进入文件npm run serve // 运行项目
cd vue3-demo //进入文件
npm run serve // 运行项目
使用网络浏览器转到：http：// localhost：8080 /
1.5、项目文件列表
├─.gitignore├─ .git├─ node_modules├─babel.config.js├─package-lock.json├─package.json├─README.md├─src| ├─App.vue| ├─main.js| ├─components| | └HelloWorld.vue| ├─assets| | └logo.png├─public| ├─favicon.ico| └index.html
├─.gitignore
├─ .git
├─ node_modules
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
| ├─App.vue
| ├─main.js
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| ├─favicon.ico
| └index.html
2、配置PostCSS
PostCSS插件转换CSS代码的工具，增加代码的可读性。利用从我可以使用网站电子杂志的数据为CSS规则添加特定厂商的前缀。
Autoprefixer自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为CSS规则添加前缀。
2.1、安装postcss，postcss-loader，autoprefixer插件；
npm i postcss postcss-loader autoprefixer@9.8.6 -D
npm i postcss postcss-loader autoprefixer@9.8.6 -D
autoprefixer使用9.8.6版本主要是与postcss的兼容性问题，autoprefixer使用最新版本。
2.2、在vue3-demo项目下创建postcss.config.js文件；
//创建 postcss.config.jstouch postcss.config.js// postcss.config.jsmodule.exports = { plugins: [ // 配置 Autoprefixer 插件 require('autoprefixer')({ // 游览器最近的两个版本 'overrideBrowserslist': ['last 2 versions'] }) ],};
//创建 postcss.config.js
touch postcss.config.js
// postcss.config.js
module.exports = {
plugins: [
// 配置 Autoprefixer 插件
require('autoprefixer')({
// 游览器最近的两个版本
'overrideBrowserslist': ['last 2 versions']
})
],
};
2.3、在App.vue中输入以下代码，重新运行：
123
div { display: flex; }
通过游览器查看输出：
div { display: -webkit-box; display: -ms-flexbox; display: flex;}
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
3、配置Css初步语言-Sass
3.1、使用下面的命令安装
npm install sass sass-loader -D
npm install sass sass-loader -D
3.2、安装好了sass，那我们就在App.vue中使用Sass；
123
$color: #f00; div { display: flex; color: $color, }
这里我们可以在页面上，文字已经是红色了。
4、配置UI组件库
4.1、使用以下命令按装UI组件ant-design-vue @ next，ant-design-vue组件已经支持Vue3;
npm i ant-design-vue@next -D
npm i ant-design-vue@next -D
4.2、在main.js中，加上日期ant-design-vue组件库
// main.jsimport { createApp } from 'vue'import App from './App.vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'const app = createApp(App)app.use(Antd)app.mount('#app')
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App)
app.use(Antd)
app.mount('#app')
4.3、在App.vue中约会ant-design-vue组件；
Home User Tom (collapsed = !collapsed)" /> (collapsed = !collapsed)" /> import { UserOutlined, HomeOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; export default { components: { UserOutlined, HomeOutlined, MenuUnfoldOutlined, MenuFoldOutlined }, data() { return { selectedKeys: ['home'], collapsed: false, }; }, methods: { } }; #components-layout-demo-custom-trigger { height: 100vh; .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; &:hover { color: #1890ff; } } .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } } .main { margin: 24px 16px; padding: 24px; background: #fff; height: calc(100% - 64px); }
Home
User
Tom
(collapsed = !collapsed)" />
(collapsed = !collapsed)" />
import {
UserOutlined,
HomeOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined
} from '@ant-design/icons-vue';
export default {
components: {
UserOutlined,
HomeOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined
},
data() {
return {
selectedKeys: ['home'],
collapsed: false,
};
},
methods: {
}
};
#components-layout-demo-custom-trigger {
height: 100vh;
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: #1890ff;
}
}
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
}
.main {
margin: 24px 16px;
padding: 24px;
background: #fff;
height: calc(100% - 64px);
}
5、配置路由vue-router
5.1、下载安装vue-router
npm install vue-router@4
npm install vue-router@4
5.2、安装成功后，在src中创建views文件夹，并创建home.vue`user.vue`两个文件；home.vue文件
Home
Home
user.vue文件
User
User
5.3、在src中创建router文件夹，并创建index.js文件
import { createRouter, createWebHashHistory} from 'vue-router'const Home = ()=> import('./../views/home.vue')const User = ()=> import('./../views/user.vue')const routes = [{ path: '/home', name: 'home', component: Home }, { path: '/user', name: 'user', component: User }, { path: '/', redirect: '/home', component: Home }]export default createRouter({ history: createWebHashHistory(), routes});
import {
createRouter,
createWebHashHistory
} from 'vue-router'
const Home = ()=> import('./../views/home.vue')
const User = ()=> import('./../views/user.vue')
const routes = [{
path: '/home',
name: 'home',
component: Home
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/',
redirect: '/home',
component: Home
}
]
export default createRouter({
history: createWebHashHistory(),
routes
});
5.4、在main.js中引用vue-router;
//main.jsimport router from './router/index.js'...app.use(router)
//main.js
import router from './router/index.js'
...
app.use(router)
5.5、在App.vue中第5中添加方法menuClick；
实现路由转发，在方法中添加方法menuClick
methods: { menuClick(e) { // 路由跳转 this.$router.push(e.key) }}
methods: {
menuClick(e) {
// 路由跳转
this.$router.push(e.key)
}
}
等页面更新，我们点击用户，hone菜单就可以看到效果了。
6、配置状态管理器Vuex
6.1、安装vuex;
npm install vuex@next -D
npm install vuex@next -D
6.2、在src中创建存储文件夹，并创建index.js文件；
并且在状态里面放置一个计数值；
在变异里面创建一个操作增量，每次加1；
import { createStore} from 'vuex'export default createStore({ // 存放状态 state:{ count: 0 }, mutations: { // 操作 increment(state) { state.count++ } }, actions: { }, modules: { }})
import {
createStore
} from 'vuex'
export default createStore({
// 存放状态
state:{
count: 0
},
mutations: {
// 操作
increment(state) {
state.count++
}
},
actions: {
},
modules: {
}
})
6.3、在main.js中发布vuex;
import store from './store/index.js'...app.use(store)
import store from './store/index.js'
...
app.use(store)
6.4、在home.vue中添加一个按钮，并使用count这个值；通过按钮更新Vuex的值。
使用count 这个状态{{this.$store.state.count}}
点击状态加一 export default { methods: { add() { this.$store.commit('increment') } } }
总结
今日文章的Vue3的项目组装就到这里了，现在暂时还有很多插件无法使用，后续慢慢就会更新，越来越多的插件将会支持Vue3。
本文完〜
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
