vue2.0開發(fā)實踐總結(jié)之入門篇
vue2.0 據(jù)說也出了很久了，博主終于操了一次實刀。
整體項目采用 vue + vue-router + vuex （傳說中的vue 全家桶），構(gòu)建工具使用尤大大推出的vue-cli
項目是圖片分享社交平臺。
項目預(yù)覽：
1 .vue-cli構(gòu)建工具必知
我選用的vue-cli 是基于webpack的版本 ，不了解webpack的可以先粗略看下下面的基本知識
webpack 基本知識點：
entry：入口點，webpack會從入口點設(shè)置的js文件開始對項目進行構(gòu)建，過程中，所有入口點通過import或者require依賴的包，都會被打包到output中制定的文件和路徑；
output：中設(shè)置打包好的文件的輸出路徑還有文件名；
module：主要是loaders，loaders是webpack進行打包的解析器，css、vue、babel、scss都需要用npm安裝相應(yīng)的loader，webpack才能對該格式的文件進行解析和處理；
plugins：是一些webpack的打包插件，跟解析的語言無關(guān)，用來輔助構(gòu)建，提供豐富的附加功能。
vue-cli 安裝
1）. 首先，安裝 vue-cli。(確保你有 node 和 npm)
npm i -g vue-cli
2）.創(chuàng)建一個 webpack 項目并且下載依賴
vue init webpack demo cd demo npm i
3）. 運行
npm run dev //npm run xxx 是執(zhí)行配置在package.json中的腳本 e.g: 它會去找到package.json的scripts對象，執(zhí)行node bulid/dev-server.js
4）. 構(gòu)建
npm run dev //運行結(jié)束后，在當(dāng)前目錄下會在生成 dist 目錄，將dist目錄放在服務(wù)器上，使用服務(wù)器上訪問index.html的url即可
若打包之后，項目的靜態(tài)文件出現(xiàn)引用路徑問題，可于項目目錄 config/index.js 修改以下數(shù)據(jù)
module.exports = {
build:{
assetsSubDirectory: 'static', //修改這里成你項目放置靜態(tài)文件的目錄
assetsPublicPath: './', //修改這里成你項目放置靜態(tài)文件的目錄
}
}
在靜態(tài)文件 index.html 文件下， 引用靜態(tài)文件
<link rel="stylesheet" href="static/css/icon/iconfont.css"/>
vue支持scss 配置
1）.安裝以下模塊
npm install node-sass --save-dev npm install sass-loader --save-dev //--save-dev 會將該依賴寫入package.json，方便別人安裝依賴
2）.打開webpack.base.config.js在loaders里面加上
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
3）.在需要用到scss的地方寫上
<style lang="scss"> </style>
2. 項目整體架構(gòu)
項目整體目錄如下
package.json
--build --config --dist //npm run build 之后再生成的目錄 --src --components // 用于存放組件 --page //頁面組件，由vue-router引入 --router //路由 --store // 數(shù)據(jù)流管理 main.js //入口文件 app.vue //主組件 --static //靜態(tài)文件目錄 .babelrc .gitignore //git忽略上傳文件 index.html //靜態(tài)文件入口
main.js
入口文件，主要作用是初始化vue實例并使用需要的插件
import Vue from 'vue'
import router from './router/router'
import store from './store/store'
Vue.config.debug = true //開啟debug模式
window.log = console.log
let data = {
router,
store
}
new Vue(data).$mount('#app')
//創(chuàng)建一個app實例，并且掛載到選擇符#app匹配的元素上 在根目錄html里面
掛載到#app ，此處看一下尤大大給的生命周期圖，以下的意思是，假如new vue 的時候，有顯示的 el 屬性
let data = {
el:'#app',
router,
store
}
則無須手動掛載到選擇符#app匹配的元素上
app.vue
app.vue是我們的主組件，所有頁面都是在App.vue下進行切換的,由于app.vue在所有頁面都有，我們將會在app.vue上面寫一些初始化全局方法。
考慮到 組件 header，footer，loading動畫基本整個項目都會使用到，app.vue代碼如下
<template> <div class="com-app"> <com-header></com-header> <transition :name="transitionName"> <router-view class="child-view"></router-view> </transition> <com-footer v-show="isFooter"></com-footer> <com-loading v-show="loading"></com-loading> </div> </template>
由于footer，loading在整個項目中會頻繁地改變，故v-show
v-if 如果條件為false，它什么也不做，加載速度較快。當(dāng)條件為真時，v-if 才會真正編譯渲染頁面結(jié)構(gòu)
v-show 渲染頁面結(jié)構(gòu)后，通過 "display:none" 控制元素狀態(tài)
router 根據(jù)不同路由跳轉(zhuǎn)目錄,按需加載相應(yīng)的組件
const routes = [
{
path: '/',
component: App,
children: [
{path: '/index/:type', name: 'index', component: Index},
{path: '/home', name: 'home', component: Home},
{path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
{path: '/article/:id', name: 'article', component: Article},
{path: '/addmsg', name: 'addMsg', component: AddMsg},
{path: '/search/:types', name: 'searchresult', component: SearchResult},
{path: '/login', name: 'login', component: Login},
{path: '/register', name: 'register', component: Register},
{path: '/modif', name: 'Modifi', component: Modifi},
{path: '/admin', name: 'Admin', component: Admin}
]
}
]
const router = new VueRouter({
routes: routes, // short for routes: routes
linkActiveClass: 'active', // router-link的選中狀態(tài)的class，也有一個默認(rèn)的值
history: true
})
后續(xù)更新 項目中遇到的難點，以及vuex使用～
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何動態(tài)配置ip與端口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue點擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實例
這篇文章主要介紹了vue點擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中使用WX-JSSDK的兩種方法,每種方法通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
本文主要介紹了vue中el表單的簡單查詢方法,主要包括表單頁面根據(jù)groupid 、type 、errortype進行數(shù)據(jù)過濾,感興趣的可以了解一下2023-10-10
vue服務(wù)區(qū)緩存分為頁面緩存、組建緩存和接口緩存，本文通過實例代碼逐一給大家介紹，本文重點給大家介紹vue服務(wù)端渲染添加緩存的方法，感興趣的朋友跟隨小編一起看看吧2018-09-09
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue使用動畫實現(xiàn)滾動表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01