nodejs+webpack+vue以及npm安装对应的库
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
npm config list可以查看
修改完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模板，<router-view>把路由匹配到的組件渲染在這里
<body><div id="app"><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div><script src="/dist/build.index.js"></script> </body>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` 屬性指定鏈接，<router-link> 默認會被渲染成一個 `<a>` 標簽，<router-view>，<router-view>把路由匹配到的組件渲染在這里
<body> <div id="app"><ul id="nav" class="clearfix"> <li><router-link to="/index">首頁</router-link></li> <li><router-link to="/userList">報名人員</router-link></li></ul> <div id="banner"></div> <router-view></router-view> </div> <script src="/dist/build.index.js"></script> </body>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
<template><div class="login-box"><div><p><input type="text" placeholder="手機號" v-model.trim="phone"/><input type="text" placeholder="驗證碼" v-model="code" readonly="readonly"/> </p><input type="button" value="發送驗證碼" @click="getCode"/></div><button id="login-btn" @click="loginUser">登 錄</button> </div> </template><script> import {hex_md5} from '../util/md5' import httpHelper from "../util/httpHelper" import {setTelPhone} from '../util/cacheManger'export default { data () {return {phone: '15365655565',code:'' }},methods:{getCode(){let _self = this;let tel = /^[0-9]{11}$/.test(_self.phone)if(!tel){_self.phone = '手機號不正確'; return;}if(_self.phone){let params = {num:_self.phone} httpHelper.get(_self,"getVeryCode",params,(data)=>{if(data.body.code<0){alert(data.body.description);return; }_self.code = data.body.data; },(err)=>{alert("shi bai")})} },loginUser(){let _self = this;if(_self.phone && _self.code){ setTelPhone(_self.phone); window.location.href = '/users.html'; }}} } </script>安裝對應的css和ui框架：
npm uninstall element-ui 卸載
安裝對應的版本：npm install element-ui@2.0.0 -S
npm install fontawesome # 圖標字體庫?
fontawesome官網:http://fontawesome.dashgame.com/
?
?
總結
以上是生活随笔為你收集整理的nodejs+webpack+vue以及npm安装对应的库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Flash旋转复制和对齐工具如何绘制齿轮
- 下一篇： go get github.com/as