Vue脚手架安装、工具及相关报错

2019-03-18 本文已影响2人 GA_

安装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项目创建大概步骤，借鉴：

安装node.js
安装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

Vue脚手架安装、工具及相关报错

猜你喜欢

热点阅读