- 安装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
* 创建项目
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项目创建大概步骤，借鉴：
-
安装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使用脚手架创建项目
?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默认的路径。
步骤如下：
进入终端，依次输入一下命令
（1）创建global安装任务的目录
mkdir ~/.npm-global
（2）配置npm使用新的目录
npm config set prefix '~/.npm-global'
（3）在~/.profile文件中增加配置
export PATH=~/.npm-global/bin:$PATH
（4）配置文件立即生效
source ~/.profile
（5）重新执行命令
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
网友评论