vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具,vue-cli主要是用于构建单页应用的脚手架。
使用方法:
安装node.js,同时npm也会一同安装,分别执行node -v;npm -v 查看安装版本,安装完成之后执行npm list -global;会
看到npm路径并不是自己的安装目录xxx/nodejs/ 下,而是:
这是因为npm 默认本地的仓库是user/Appdata/Roaming/下面,需要分别执行指令copy并修改本地仓库,(假如安装D:/nodejs)
npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"
再次执行npm list -global 便可看到修改后的仓库配置。输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站,npm config get registry可以测试镜像站点,查看仓库配置文件 user/.npmrc
修改完prefix,cache之后需要重新安装npm 执行npm install npm -g 此时npm 会安装在node_global/node_modules下面
还需要将node_global/node_modules加入到环境变量中才可执行npm, 但是还有一个问题就是git bash here 找不到npm
此时必须将机器重启,然后接着才能安装vue等工具
然后使用npm安装vue以及脚手架vue-cli,npm install 这样安装目录就是在D:/nodejs/mode_global/node_modules目录下
并把D:/nodejs/mode_global添加到环境变量path中vue指令便可查阅。
1、安装vue-cli:npm install -g vue-cli
2、安装webpack-simple模板:vue init webpack-simple 项目名称(你要创建的项目名称),如: vue init webpack-simple demo
3、安装项目依赖:npm install
4、执行代码:执行webpack命令,在dist目录下生成build.js文件,执行npm run dev命令,自动启动web服务127.0.0.1:8080
本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。
本项目用到了两个html模板页:index.html、users.html,因此,在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。
index.html模板,
index.js入口文件,引入了logon.vue组件,在'/'目录下默认引入该组件。
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Login from './components/login.vue'
require('./scss/reset.scss')
require('./scss/layout.scss')
Vue.use(VueResource)
Vue.use(VueRouter)
const router= new VueRouter({
routes:[
{path:'/',component:Login}
]
});
new Vue({
router,
el:'#app'
});
users.html模板,使用 router-link 组件来导航,通过传入 `to` 属性指定链接,
user.js入口文件,引入了index.vue和userList.vue两个组件,在'/'及'/index'目录下默认引入index.vue组件,在'/userList'目录下默认引入userList.vue组件。
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Index from './components/index.vue'
import UserList from './components/userList.vue'
require('./scss/reset.scss')
require('./scss/user.scss')
Vue.use(VueResource)
Vue.use(VueRouter)
const router= new VueRouter({
routes:[
{path:'/',component:Index},
{path:'/index',component:Index},
{path:'/userList',component:UserList}
]
});
new Vue({
router,
el:'#app'
});
每个组件下都有各自的js页面效果及数据请求,如:login.vue
安装对应的css和ui框架:
npm uninstall element-ui 卸载
安装对应的版本:npm install [email protected] -S
npm install fontawesome # 图标字体库
fontawesome官网:http://fontawesome.dashgame.com/