跑動一個vue專案的完整步驟(寫給自己的新手指南)
一、配置vue環境
值得注意的是在配置專案的名稱以及一些相關屬性的時候,以下兩項要特別注意 Projectname這裡設定的名稱會在專案的title中展示,如果你後來重新設定了title也會先展示它,但這裡似乎不可以使用中文,目前還沒有找到好的解決辦法所以先用loading代替
這個問題找到解決方案了(實在是我太蠢了),直接到最後dist裡面的index.html內改title就好了
ESLing如果選擇yes的話會導致vue專案執行的時候非常嚴格,包括多一個空格它都會報警告,非常討厭,所以選擇no,當然如果你實在不小心選擇了yes也是有辦法的,只需要在webpack.base.conf.js中吧引用ESLing的地方註釋掉就好,見下圖
cnpm install jquery --save
cnpm i mint-ui --save
二、配置路由
安裝完環境之後呢,我們就可以開始碼程式碼了
初次接觸vue實在搞不懂他這個資料夾之間的關係(現在我也不是很明白只是能勉強搭專案),所以這裡先寫一下我現在搭專案的檔案路徑 具體檔案路徑就如上圖,下面我們開始講一下引入iconfont和引入公共部分js
a.引入iconfont
到iconfont的官網上下載樣式,然後把下載好的相關檔案放入資料夾下,最後在app.vue
b.引入公共部分js
在main.js裡面引入檔案路徑,具體如下
c.配置路由
在router/index.js內配置
import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'
import home from '@/components/home'//定義
Vue.use(Router)
//引用
export default new Router({
routes: [
{
path: '/',//'/'是預設的index位置,一開啟專案就是這個頁面
name: 'home' ,
component: home
},
{
path: '/user',//用ruoter-link跳轉時,to='',裡面填寫的值
name: 'user',
component: user
},
]
})
d.使用元件
在vue中,封裝元件可以節約我們很多程式碼,方便好用。下面寫一個簡單的頂部返回 複製程式碼
//公用放回上一級介面程式碼
<template>
<div class="commonBack">
<p>{{title}}</p>
<em @click="back()" v-if="show">
<span class="iconfont backicon"></span>
</em>
</div>
</template>
<script>
export default {
name: "commonBack",
data() {
return {}
},
props: {
title: {
type: String,
default: "頂部名稱"
},
show: {
type: Boolean,
default: true
}
},
methods: {
back() {
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.commonBack {
width: 100%;
height: 40px;
background-color: #6fc8fb;
line-height: 40px;
position: fixed;
z-index: 99999;
top: 0;
}
.commonBack > em {
position: absolute;
top: 0;
left: 10px;
}
.commonBack > em > img {
width: 100%;
height: 100%;
}
.commonBack > p {
color: #ffffff;
font-size: 16px;
text-align: center;
margin: 0;
}
</style>
//引用的地方
<!--manage-->
<template>
<div class="custom">
<commonBack :title="title"></commonBack>
</template>
<script>
//定義元件名 commonBack
import commonBack from "@/components/commonBack"
export default {
name: "custom",
//引用
components: {
commonBack
},
data() {
return {
title: '聯絡客服',//設定中間文字內容
}
},
mounted: function () {
},
methods: {},
}
</script>
<style scoped></style>
做好了就npm run dev跑動自己的專案吧
三、打包專案以便部署到伺服器
首先我們得先找到下圖中的兩個檔案
然後在上圖中的兩個檔案中分別修改配置如下
完成好以上之後,我們就可以在cmd裡面npm run build
打包好之後呢我們可以看到在專案檔案下多了一個dist檔案,只要把這個dist檔案部署到伺服器就ok啦
好啦就醬了。看到這裡的各位程式設計師們祝您心明眼亮,加班不禿~