vue
介紹：vue構建用戶界面的漸進式框架
起步，使用vue必須搭建環境——node
nodejs下載
安裝配置：node 安裝配置
下載node 地址：node下載
選擇window系統，建議安裝 .msi安裝包；
下一步——下一步——（中間會出現安裝模式，和安裝路徑，自己根據需要安裝）——完成
npm
npm其實是Node.js的包管理工具，npm安裝插件 npm install +[name插件名字] [-g] [–save-dev]
node插件名稱
-g：全局安裝；
–save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；
-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；
但是：npm他是國外服務器下載，會有點慢，我們會使用國內淘寶鏡像cnpm
安裝cnpm：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完之後，就可以用cnpm 來替換npm
環境配置：
一般我們安裝軟件會安裝到D或者E，而使用npm安裝一個cluster模塊他會出現在C盤默認的路徑下面，所以我們要去修改它的默認路徑
在node.js文件夾下創建兩個文件夾
node_global; //全局模塊目錄
node_cecal； // 緩存目錄
用管理員打開終端
輸入下面兩條命令：
npm/cnpm config set prefix “node_global文件的路徑”
npm/cnpm config set cache “node_cache的文件路徑”
環境配置
桌面上找到——> 我的電腦(此電腦) ——>右鍵點擊——>高級系統配置——>環境變量——> 打開
點擊新建——> 變量名：NODE-PATH 變量值node下面的node_global安裝路徑
配置Path :
配置路徑 ：D:\nodejs\node_global
配置完重啓電腦
首次搭建vue項目
1.新建一個文件夾 用打開軟件打開
2.打開終端
3. vue init webpack + 項目名 回車
注：如果出現
‘vue’ 不是內部或外部命令，也不是可運行的程序
或批處理文件。----沒有全局配置vue腳手架 vue-cli
安裝vue-cli
以管理員身份打開終端
輸入：npm install vue-cli -g 全局安裝
如果輸入之後還是出現錯誤，查看環境變量
回車：
? Project name （vue 新更改的） // 項目名稱 回車默認你輸入的項目名，如果更改名字就直接輸入更改後的名字
? Project description A Vue.js project ————回車
? Author zhangyd [email protected] ————回車 注：默認是yes
? Vue build standalone ————回車
? Install vue-router? Yes ————是否安裝路由 一般項目都使用路由 yes 注：如果在這沒有安裝但是項目中需要使用，就按照安裝插件方式安裝
? Use ESLint to lint your code? No ————是否效驗 一般輸入n 可以選擇yes ，可以規範自己的代碼，但他會很苛刻，空格，逗號都會報錯，有時候還找不到原因，如果你但是一直回車默認選擇了yes 在bulid文件下面：\webpack.base.conf.js 中找到
const createLintingRule 對象，註釋裏面的內容 。項目就不會報錯
蕭山研發分部 > vue (vue搭建npm/cnpm，element-ui插件,jquery插件） > image2019-7-25_17-8-15.png
? Set up unit tests No ———— 是否設置單元測試 ？ yes/no 都可以但是一般no
? Setup e2e tests with Nightwatch? No ———— 是否設置e2e測試？ 這個no
? Should we run npm install for you after the project has been created? (recommended) npm
注：下載完之後會自己體現接下里的兩句命令
cd +項目名 npm run dev
4.cd + 項目名 //注：在安裝插件，都必須進入到項目名中才能安裝，要不會報錯
5.npm run dev 啓動項目
安裝插件：在cd到項目後： npm install + 插件名字
搭建項目
1.在開發軟件打開終端
2. vue init webpck + 項目名字（名字規範小駝峯） 回車
生成項目
生成項目各個文件夾以及重要使用的文件
├── index.html 入口頁面
├── build 構建腳本目錄（webpack配置文件) 最終發佈的代碼存放位置
│ ├── build-server.js 運行本地構建服務器，可以訪問構建後的頁面
│ ├── build.js 生產環境構建腳本
│ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
│ ├── dev-server.js 運行本地開發服務器
│ ├── utils.js 構建相關工具方法
│ ├── webpack.base.conf.js wabpack基礎配置
│ ├── webpack.dev.conf.js wabpack開發環境配置
│ └── webpack.prod.conf.js wabpack生產環境配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── mock mock數據目錄
│ └── hello.js
├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
├── src 項目源碼目錄 ---- 我們寫的內容都是在src文件下面
│ ├── main.js 入口js文件，核心文件，全局配置 --------------------------------
│ ├── app.vue 根組件（如果你全局使用，可以把內容寫在app.vue中）
│ ├── components 公共組件目錄--------------------------------------------------------
│ │ └── title.vue
│ ├── assets 資源目錄，這裏的資源會被wabpack構建------------------------------
│ │ └── images 一般assets放項目的圖片、css、公共自定義js等
│ │ └── logo.png
│ ├── routes 前端路由,配置路由路徑
│ │ └── index.js
│ ├── store 應用級數據（state）
│ │ └── index.js
│ └── views 頁面目錄
│ ├── hello.vue
│ └── notfound.vue
├── static 純靜態資源，不會被wabpack構建。
└── test 測試文件目錄（unit&e2e）
└── unit 單元測試
├── index.js 入口腳本
├── karma.conf.js karma配置文件
└── specs 單測case目錄
└── Hello.spec.js
vue element-ui
1.搭建vue
2.引入插件 npm install element-ui --save
3.在main.js 全局配置
import ElementUi from ‘element-ui’ //1.全局引入
import ‘element-ui/lib/theme-chalk/index.css’; //3.使用element中的css文件
Vue.use(ElementUi); //2.使用
注：所有使用插件的步驟都是一致的
在終端下載引入插件 npm install +引入插件名字 --save
在項目中的main.js 中全局配置 引入——>使用
import 自定義名字 from ‘插件名’
Vue.use(自定義名字)
引入插件中的css/js
import ’引入css/js的路徑 ‘
vue中引入jquery
在終端下載jquery npm install jquery --save
在main.js 引入 import ‘jquery’
在項目中\build文件夾\webpack.base.conf.js 中配置jquery
1.引入包 var webpack = require(‘webpack’)
2.配置： 在module.exports對象下面
plugins:[
new webpack.ProvidePlugin({
$:‘jquery’,
jquery:‘jquery’,
jQuery:‘jquery’,
‘window.jQuery’:‘jquery’
})
],
蕭山研發分部 > vue (vue搭建npm/cnpm，element-ui插件,jquery插件） > image2019-7-25_17-11-57.png