vue2.x-cnode(vue全家桶)

vue2.x-cnode

關於項目

vue2.x Cnode社區是基於vue、vue-router、vuex、axios、es6開發，使用webpack構建工具編譯打包項目

若是此開源項目對你們學習vue的全家桶有幫助，請給我一個star,由於你的star讓我以爲這個開源有了價值！

點擊查看效果

vue1.x 項目

基於vue1.x已上線積分購項目

下載 && 啓動

# 克隆項目
git clone https://github.com/vincentSea/vue2.x-Cnode.git
# 安裝依賴
npm install
# 啓動開發環境
npm run dev
# 打包項目
npm run build

項目目錄

│  .babelrc         // ES6語法編譯配置
│  .gitignore       // git的文件過濾配置
│  index.tpl        // 程序入口html模板
│  package.json     // 項目相關信息配置，經過執行 npm init 命令建立
│  README.md        // 項目說明
│  
├─build             // webpack配置項
│       
├─src               // 項目主文件夾  
│  │  App.vue       // 頁面入口文件
│  │  main.js       // 程序入口文件，加載各類公共組件
│  │  
│  ├─assets         // 靜態資源，圖片、公用樣式、插件
│  ├─components     // 公共組件
│  ├─fetch          // 請求api
│  ├─pages          // 頁面組件
│  ├─router         // 頁面路由配置
|  |─util           // 公用方法 （過濾器、彈窗）
│  └─vuex           // vuex的狀態管理
│              
└─static

源碼地址

webpack 配置

本項目是參考vue-cli快速構建項目，本身搭建項目。後續會改爲webpack2.x的版本

安裝babel

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

// 使用babel,編譯ES6語法
{
    test: /\.js$/,
    loader: 'babel?presets=es2015',
    exclude: /node_modules/
}

圖片路徑與打包

# 安裝引入圖片須要依賴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"
}