vue2.x-cnode(vue全家桶)

ThinkSNS 發(fā)布于2019-08-20 14:26 / 1796人閱讀

摘要：后續(xù)會(huì)改成的版本安裝安裝編譯語(yǔ)法使用編譯語(yǔ)法圖片路徑與打包安裝引入圖片需要依賴(lài)的加載器樣式引入打包文件編譯打包引入樣式文件編譯

vue2.x-cnode 關(guān)于項(xiàng)目

vue2.x Cnode社區(qū)是基于vue、vue-router、vuex、axios、es6開(kāi)發(fā)，使用webpack構(gòu)建工具編譯打包項(xiàng)目

如果此開(kāi)源項(xiàng)目對(duì)大家學(xué)習(xí)vue的全家桶有幫助，請(qǐng)給我一個(gè)star,因?yàn)槟愕膕tar讓我覺(jué)得這個(gè)開(kāi)源有了價(jià)值！

點(diǎn)擊查看效果

vue1.x 項(xiàng)目

基于vue1.x已上線(xiàn)積分購(gòu)項(xiàng)目

下載 && 啟動(dòng)

# 克隆項(xiàng)目
git clone https://github.com/vincentSea/vue2.x-Cnode.git
# 安裝依賴(lài)
npm install
# 啟動(dòng)開(kāi)發(fā)環(huán)境
npm run dev
# 打包項(xiàng)目
npm run build

項(xiàng)目目錄

│  .babelrc         // ES6語(yǔ)法編譯配置
│  .gitignore       // git的文件過(guò)濾配置
│  index.tpl        // 程序入口html模板
│  package.json     // 項(xiàng)目相關(guān)信息配置，通過(guò)執(zhí)行 npm init 命令創(chuàng)建
│  README.md        // 項(xiàng)目說(shuō)明
│  
├─build             // webpack配置項(xiàng)
│       
├─src               // 項(xiàng)目主文件夾  
│  │  App.vue       // 頁(yè)面入口文件
│  │  main.js       // 程序入口文件，加載各種公共組件
│  │  
│  ├─assets         // 靜態(tài)資源，圖片、公用樣式、插件
│  ├─components     // 公共組件
│  ├─fetch          // 請(qǐng)求api
│  ├─pages          // 頁(yè)面組件
│  ├─router         // 頁(yè)面路由配置
|  |─util           // 公用方法 （過(guò)濾器、彈窗）
│  └─vuex           // vuex的狀態(tài)管理
│              
└─static

源碼地址 webpack 配置

本項(xiàng)目是參考vue-cli快速構(gòu)建項(xiàng)目，自己搭建項(xiàng)目。后續(xù)會(huì)改成webpack2.x的版本

安裝babel

# 安裝babel,編譯ES6語(yǔ)法
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  babel-preset-stage-2

// 使用babel,編譯ES6語(yǔ)法
{
    test: /.js$/,
    loader: "babel?presets=es2015",
    exclude: /node_modules/
}

圖片路徑與打包

# 安裝引入圖片需要依賴(lài)url-loader的加載器
cnpm install --save-dev url-loader

{
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: "url",
    query: {
        limit: 10000,
        name: "[name].[hash:7].[ext]"
    }
}

樣式引入打包 scss文件編譯

cnpm install --save-dev css-loader sass-loader cssnext-loader
cnpm install --save-dev node-sass

 // 打包引入樣式
{
    test: /.css$/,
    loader: "css-loader?sourceMap!cssnext-loader"
},
// scss文件編譯 
{
    test: /.scss$/,
    loader: "css-loader?sourceMap!sass-loader!cssnext-loader"
}