About project

The vue2.x Cnode community is based on vue, vue-router, Vue x, axios and es6. It compiles and packages the project http://www.vue-js.com/topic/58ae7fc2a9c1282817afc2e0 using web pack construction tools.

If this open source project is helpful for everyone to learn vue's bucket, please give me a star, because your star makes me feel that this open source has value!

Warehouse address

Click to see the effect

vue1.x project

Online based on vue1.x Integral Purchase Items

Download & Start

# Clone project
git clone https://github.com/vincentSea/vue2.x-Cnode.git
# Installation dependency
npm install
# Start up the development environment
npm run dev
# Packing project
npm run build

Project directory

│  .babelrc         // ES6 syntax compilation configuration
│  .gitignore       // git file filtering configuration
│  index.tpl        // html template for program entry
│  package.json     // Project-related information configuration, created by executing npm init command
│  README.md        // Project description
│  
├─build             // webpack configuration item
│       
├─src               // Project Home Folder  
│  │  App.vue       // Page entry file
│  │  main.js       // Program Entry File, Loading Various Common Components
│  │  
│  ├─assets         // Static resources, pictures, public styles, plug-ins
│  ├─components     // Common components
│  ├─fetch          // Request api
│  ├─pages          // Page component
│  ├─router         // Page routing configuration
|  |─util           // Common methods (filters, bullet windows)
│  └─vuex           // vuex state management
│              
└─static   

Web pack configuration

This project refers to the vue-cli rapid construction project and builds its own project. Subsequently, it will be changed to the version of webpack 2.x

Install babel

# Install babel and compile ES6 grammar
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  babel-preset-stage-2

// Compile ES6 grammar using babel
{
    test: /\.js$/,
    loader: 'babel?presets=es2015',
    exclude: /node_modules/
}

Picture Path and Packaging

# Installing loaders that import images depends on url-loader
cnpm install --save-dev url-loader

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

Style introduction packaged scss file compilation

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

 // Packing Introducing Style
{
    test: /\.css$/,
    loader: "css-loader?sourceMap!cssnext-loader"
},
// scss file compilation 
{
    test: /\.scss$/,
    loader: "css-loader?sourceMap!sass-loader!cssnext-loader"
}