vue自己创建思维

使用vux自带模板，因为Vue官方的模板乱而不简洁！

1：先从node.js官网下载并安装node,安装过程很简单；

2.npm版本需要大于3.0 ,如果低于3.0要升级它:
查询npm版本号代码: npm-v
升级npm代码: npm install npm -g

3.基于node.js利用淘宝npm镜像安装相关依赖(国内使用npm会很慢),完成后就可以用cnpm代替npm来安装依赖包了
安装cnpm代码: npm install -g cnpm --registry=https://registry.npm.taobao.org

4：

使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目

默认为 webpack2 模板，如果你需要使用webpack1，请使用 vue init airyland/vux2#webpack1 projectPath

npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev

5：下面开始创建新项目
cd 进入你想安装vue的路径
vue init webpack my-project
回车,等待
出来? Project name my-project时,意思是:项目名称(my-project)?回车
出来? Project description A Vue.js project回车
出来? Author runoob <test@runoob.com>回车
出来? Vue build...回车
出来? Install vue-router?N
出来? Use ESLint to lint your code?Y
出来? Pick an ESLint preset Standard回车
出来? Setup unit tests with Karma + Mocha? Y
出来? Setup e2e tests with Nightwatch? Y


有个信息出来后就创建完成了

6：自己认为最好的分配方式：

main.js里放这些：

import  Vue  from  'vue'

import  eventhub  from  './eventhub'

import  FastClick  from  'fastclick'

import  router  from  './router'

import  App  from  './App.vue'

import  Vuex  from  'vuex'

Vue. use( Vuex)

FastClick. attach( document. body) //点击延迟

Vue. prototype. $eventhub =  eventhub

Vue. config. productionTip =  false

/* eslint-disable no-new */

var  appVue =  new  Vue({

   router,

   render:  h  =>  h( App)

}). $mount( '#app')

src目录下的eventhub.js

import  Vue  from  'vue'

export  default  new  Vue()

router.js:

import  Vue  from  'vue'

import  Router  from  'vue-router'

Vue. use( Router)

function  load( component) {

   return ()  =>  System. import( `./components/${ components }.vue`)

}

export  default  new  Router({

   routes: [

       {

             path:  '/',

             name:  '首页',

             component:  function ( resolve) {

                 require([ './pages/HelloFromVux'],  resolve)

            },

        },

              {

             path:  '/Hello',

             name:  '首页',

             component:  function ( resolve) {

                 require([ './pages/Hello'],  resolve)

            },

        }

  ]

})

自己创建一个pages文件夹装自己的页面组件；

components文件夹装公共组件：

注意：vux并没有装有es5和sass写法，所以这里面含了，所以

文件里面提现出来的区别就是,使用 --save-dev 安装的 插件,被写入到 devDependencies 对象里面去,而使用 --save 安装的插件,责被写入


到 dependencies 
1，使用save会在package.json中自动添加。


----npm install node-sass  --save-dev


----npm install sass-loader  --save-dev

$ cnpm install node-sass  --save      sass安装

$ cnpm install --save-dev babel-preset-es2015 es5安装；

接下来到webpack.base.conf.js文件夹中去配置：

      {

         test:  /\.less $ /,

         loader:  'style!css!less'

      },

      {

         test:  /\.scss $ /,

         loader:  'style!css!scss'

      },

      {

           test:  /\.js $ /,

           exclude:  /(node_modules| bower_components)/,

           loader:  'babel',

           query: {

               presets: [ 'es2015']

          }

      }

接下来come on!自己去开发把！