配置⼀个vue3.0项⽬的完整步骤
⽬录
1.初始化项⽬
2.项⽬结构
3.项⽬介绍
4. 开发项⽬
5.vue-router
6.element-ui
7.sass
9.axios
10.设置eslint
11. mock
12.vee-validate
13. js-cookie
14.vuex
15.路由拦截
说起来有点丢⼈，我已经使⽤vue好久了，但是怎么从0开始配置⼀个vue项⽬，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播⾃⼰的⼥朋友洗澡。
以下以新建⼀个图书管理项⽬为例。我使⽤vue3新建项⽬，对于创建⼀个项⽬来说，vue3真的⽐vue2简单很多。
1.初始化项⽬
1.1全局安装vue-cli
创建vue项⽬，⾸先要确保全局安装了vue命令⾏⼯具。
我这边使⽤yarn⽽不⽤npm，因为yarn要⽐npm好⽤的多，强烈推荐使⽤。如果⼤家对yarn不熟悉，我这边免费赠送我的yarn 教程。。
yarn add global @vue/cli
1.2 新建项⽬
使⽤vue-cli3开发项⽬，可以使⽤图形化界⾯，也可以使⽤命令⾏，还可以基于原型进⾏开发。我这⾥以常见的基于命令⾏的开发为例。
我想在我D盘的test⽂件夹下新建⼀个图书管理项⽬，项⽬名叫book。执⾏如下命令即可。
D:\test>vue create book
这⾥可以选择我们需要安装的预处理器preset。我们可以直接选下图中的第⼀个选项，这样可以省去很多⿇烦。不过这⾥为了讲解需要，我们选择默认的（bable+eslint）。往后我们再讨论怎么⼿动安装其他preset。我强烈建议你选择第⼀项，这样真的可以省去很多⿇烦。
程序执⾏完后，项⽬结构如下：
.
|-book
|-fig.js
|-package.json
|-public
| |-favicon.ico
| |-index.html
|-README.md
|-src
| |-App.vue
| |-assets
| | |-logo.png
| |-components
| | |-HelloWorld.vue
| |-main.js
|-yarn.lock
将命令⾏路径设置为book项⽬所在的路径
D:\test>cd book
启动项⽬
yarn serve
执⾏完，我这边没有报错，就说明安装没有问题。
2.项⽬结构
vue已经给我们新建了⼀个初始的项⽬结构，但是这个项⽬结构还不完善。我们需要新建⼀下⼏个⽬录。新建的⽬录都是新建在src⽬录下。
views ⽤户存放我们的页⾯
store 放置vuex程序
api 放置所有的接⼝程序
utils 放置⼯具函数（可有可⽆）
router 放置路由信息
styles 放置全局样式（可有可⽆）
components 这个已经有了，⽤来存放我们页⾯中的组件。我们可以直接把组件新建在components⽬录下，不过这样不太清晰，我喜欢在components⽬录下，再为每个页⾯新建⼀个⽂件夹，把每个页⾯的组件放在对应的⽂件下
assets 这个也已经有了，⽤来存放我们的资源⽂件，视频、⾳频、图⽚等。
此时的⽬录结构如下：
|-book
|-fig.js
|-package.json
|-public
| |-favicon.ico
| |-index.html
|-README.md
|-src
| |-api
| |-App.vue
| |-assets
| | |-logo.png
| |-components
| | |-HelloWorld.vue
| |-main.js
| |-router
| |-store
| | |-index.js
| |-utils
| |-views
|-yarn.lock
3.项⽬介绍
我们要讲解vue的使⽤，总的拿个项⽬练⼿。我就做⼀回产品经理，虚拟⼀个图书管理项⽬吧。我们有2个页⾯。分别如下
登录页，⽤户输⼊账号admin和密码admin，就跳转到我们的⾸页
⾸页，显⽰⼀些图书信息（我为了省事就不显⽰了）。
这个项⽬会涉及到那些操作呢：
点击跳转
请求
展⽰
因此处理，vue提供给我们的组件外，我们还需要⼿动添加⼀下这些组件
路由组件：vue-router
请求组件：axios mock
ui组件：element-ui sass
表单验证组件：vee-validate
状态：vuex js-cookie
好了现在我们根据我们的需求，⼀步步开发我们的页⾯。
4. 开发项⽬
4.1 登录页
在views⽂件夹下新建Login.vue、Index.vue 。这三个页⾯的代码⼤同⼩异，⽬前只是基本的代码，稍后还要修改。
<template>
<!-- 这是login页⾯ -->
<div>这⾥是login 页⾯</div>
<!-- 这是index页⾯ -->
<div>这⾥是index 页⾯</div>
</template>
<style>
</style>
<script>
export default {
name: 'Login',
data() {
return {
}
},
}
</script>
修改src⽬录下的App.vue ⽂件。删掉#app⽂件⾥的内容，改为<router-view>，这⾥就是以为显⽰其他组件的地⽅。删除script 中的内容。修改后的App.vue代码如下：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5.vue-router
使⽤vue开发任何⼀个项⽬都涉及都路由，所以我们先讲解路由。这⾥需要安装的组件是vue-router
D:\test\book>yarn add vue-router
在我们刚刚新建的router⽂件夹下新建index.js⽂件，程序如下
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Index from '../views/Index.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
redirect: '/index'
}, {
path: '/login',
name: 'Login',
components: Login
}, {
path: 'index',
name: 'Index',
components: Index
}]
})
export default router
修改main.js，引⼊我们的路由。在第3⾏我引⼊了路由，在new Vue的时候还需要把router加进去了，这样才能正常使⽤路由。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
好了现在我们可以访问我们的页⾯了，忽略链接上的端⼝号，vue会根据你电脑端⼝的使⽤情况，⾃动选择⼀个合适的端⼝号，所以我的端⼝号可能跟你的不同。
localhost:8081/#/ index页⾯，这是因为我在路由⾥使⽤redirect重定向
localhost:8081/#/index 还是index页⾯
localhost:8081/#/login login页⾯
ok ⾃此我们的路由配置成功。我这边访问页⾯是没有问题，如果你有问题，你就下⾃⼰的错误在哪⾥。
6.element-ui
下⾯就进⼊我们的页⾯开发模式，⾸先我们要开发的是login页。我们可以使⽤原⽣的html开发，但是，效率低下，所以我们还是⽤vue组件吧。这⾥我以element-ui为例
安装
D:\test\book>yarn add element-ui
配置：在main.js中引⼊element
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引⼊element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
修改Login.vue。
把代码修改成下⾯这样⼦后，我们的表单就建完了。打开页⾯。发现我们页⾯功能是有了，但是太丑了，表单占据了整个页⾯的宽度，因此我们还要修改下样式。这⾥我们就要⽤到sass
<template>
<div class="login">
<div class="l-form">
<div class="l-tip">图书馆管理系统</div>
<el-form ref="form" :model="form">
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
form: {
name: '',
password: ''
}
}
},
methods: {
onSubmit() {
},
},
}
</script>
<style>
</style>
7.sass
我们可以直接⽤css的，但是我不推荐这样⽤，因为原⽣太丑了。我们要使⽤css预处理器写css样式。
css预处理器有sass和less，当然还有其他的但是我没⽤过。less我不推荐使⽤，因为功能不强、像⾃定义函数功能就没有，写代码特别别扭，我推荐sass。
安装sass
D:\test\book>yarn add node-sass sass-loader
vue element admin
vue-cli3 对sass简直是0配置，上⾯我们安装好处理器后，直接在style标签上加上lang="scss"就可以使⽤sass了。
修改Login.vue中的style
<style lang="scss">
.login {
width: 100%;
height: 100%;
background: #000;
.l-form {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 300px;
margin: auto;
border-radius: 8px;
background: #fff;
padding: 20px;
.l-tip {
text-align: center;
font-size: 24px;
font-weight: bold;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。