- 安裝vuew腳手架
npm install -g @vue/cli
- 安裝element-ui
npm i element-ui -S
- 安裝sass
npm install sass-loader node-sass --save-dev
- 安裝vue-custom-element
npm install vue-custom-element --save
- 安裝vue-router
npm install vue-router—save
- 安裝vue-touch
npm install vue-touch@next --save
- 安裝vue-loadervue-template-compiler
npm install -D vue-loader vue-template-compiler
* 安裝jsx
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
* 升級Vue
npm upgrade vue vue-template-compiler
* 創(chuàng)建項目
vue init webpack 項目名稱
* 運行項目
npm run dev
* 生成部署的一套文件
npm run buid
* 餓了么組件
npm i element-ui -S
* mint-ui
npm i mint-ui --save
* Vuex
npm install vuex --save
* qrcodejs
npm I qrcodejs2
npm I qrcodejs3
* axios
npm install axios
Vue項目創(chuàng)建大概步驟，借鑒：
安裝npm：node.js下的包管理器
安裝vuew腳手架 終端輸入：npm install -g @vue/cli
安裝element-ui 終端輸入：npm i element-ui -S
安裝vuex 終端輸入：npm install vuex -s
安裝axios 終端你輸入：npm install axios
安裝scss 終端輸入：npm install node-sass -save-dev
houjianan:~> vue -V
3.3.0
houjianan:Web> vue init webpack vuwproject
Command vue initrequires a global addon to be installed.
Please run npm install -g @vue/cli-initand try again.
houjianan:Web> npm install -g @vue/cli-init
npmWARNdeprecatedcoffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@3.3.0
added 254 packages from 208 contributors in 29.762s
houjianan:Web> vue init webpack vueproject
?Project namevue_test_project
?Project description使用腳手架創(chuàng)建項目
?Authorkongzichixiangjiao <[58895347@qq.com](mailto:58895347@qq.com)>
?Vue buildstandalone
?Install vue-router?No
?Use ESLint to lint your code?No
?Set up unit testsNo
?Setup e2e tests with Nightwatch?No
?Should we run `npm install` for you after the project has been created? (recommended)np
m
vue-cli·Generated "vueproject".
# Installing project dependencies ...
# ========================
# Project initialization finished!
# ========================
To get started:
cd vueproject
npm run dev
如下ERROR:
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! path /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR! { Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR! stack: 'Error: EACCES: permission denied, access \'/usr/lib/node_modules\'',
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/huanglin/.npm/_logs/2018-04-23T06_45_45_130Z-debug.log
如上錯誤解決辦法如下：
官方的解決方案：[https://docs.npmjs.com/getting-started/fixing-npm-permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions)
官方提供了兩種解決方案：
重新安裝一個node version manager。（官方推薦）
參考地址：[https://docs.npmjs.com/getting-started/installing-node](https://docs.npmjs.com/getting-started/installing-node)
注：這個方法比較繁瑣，我選擇的是第二種方案。
改變npm默認(rèn)的路徑埋泵。
步驟如下：
進入終端，依次輸入一下命令
（1）創(chuàng)建global安裝任務(wù)的目錄
mkdir ~/.npm-global
（2）配置npm使用新的目錄
npm config set prefix '~/.npm-global'
（3）在~/.profile文件中增加配置
export PATH=~/.npm-global/bin:$PATH
（4）配置文件立即生效
source ~/.profile
（5）重新執(zhí)行命令
npm install -g xxxx
拆卸腳手架 然后安裝
houjianan:VueProjectExercise> npm uninstall webpack -g
up to date in 0.035s
houjianan:VueProjectExercise> npm install webpack -g
如下ERROR:
vue init webpack JiFuDemo
-bash: vue: command not found
解決辦法：
houjianan:Desktop> npm install -g vue-cli
npmWARNdeprecatedcoffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/Users/houjianan/.npm-global/bin/vue-init -> /Users/houjianan/.npm-global/lib/node_modules/vue-cli/bin/vue-init
/Users/houjianan/.npm-global/bin/vue-list -> /Users/houjianan/.npm-global/lib/node_modules/vue-cli/bin/vue-list
/Users/houjianan/.npm-global/bin/vue -> /Users/houjianan/.npm-global/lib/node_modules/vue-cli/bin/vue
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 3.128s
houjianan:Desktop> vue init webpack jin-fu-demo
-bash: vue: command not found
houjianan:Desktop> PATH="$PATH:/Users/houjianan/.npm-global/bin"
如下ERROR:
指定版本不然警告
npmWARNwebpack-cli@3.2.3 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npmWARNwebpack-dev-middleware@3.6.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npmWARNwebpack-dev-server@3.2.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
指定版本操作步驟如下：
npm i webpack@3.6.0 -g
npm i webpack-dev-server@2.9.3 -D
