使用vux自带模板,因为Vue官方的模板乱而不简洁!
1:先从node.js官网下载并安装node,安装过程很简单;
2.npm版本需要大于3.0 ,如果低于3.0要升级它:
查询npm版本号代码: npm-v
升级npm代码: npm install npm -g
查询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
安装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
有个信息出来后就创建完成了
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')
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)
},
}
]
})
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
到 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!自己去开发把!