Idea初始化Vue项目
环境搭建
检测是否安装好nodejs和npm
node -v
npm -v
如果没有安装需要先安装node
nodejs的下载路径:https://nodejs.org/en/download/
在Windows上安装时务必选择全部组件,包括勾选Add to Path。
安装完成后,打开命令提示符重新检查版本。
安装vue.js
打开cmd,输入:npm install vue
安装vue-cli,vue脚手架
npm install -g @vue/cli
测试是否安装成功
vue -V
使用taobao镜像
在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
方法一:输入
npm i -g cnpm --registry=https://registry.npm.taobao.org
即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ,如果权限不够,请使用管理员运行命令提示符
方法二:[推荐]
npm config set registry https://registry.npm.taobao.org
设置npm代理,后续直接使用npm install 即可;
使用idea新建vue项目
如果没有vue.js选项,idea安装vue.js的插件即可
使用vue init webpack projectName初始化项目
projectName是项目名。
接下来会要求你进行一些选项设置,其实就是初始化项目:
? Project name (test) // 项目名称
? Project name test
? Project description (A Vue.js project) // 项目描述
? Project description A Vue.js project
? Author (villelee) // 作者
? Author villelee
? Vue build (Use arrow keys) // 开始选项设置
? Vue build standalone
? Install vue-router? (Y/n) Y // 安装路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y // 是否使用ESlint统一代码风格
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
? Pick an ESLint preset Airbnb
? Set up unit tests (Y/n) n // 是否安装单元测试
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n // 是否安装e2e测试
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "test".
最后出现如下代码:
To get started:
cd test
npm run dev
说明已经初始化成功,vue-cli已经将必要的依赖包都下好了,可以正常跑起来了。
$ npm run dev
> test@1.0.0 dev D:\ptest\test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting DONE Compiled successfully in 5547ms11:59:13
I Your application is running here: http://localhost:8080
相关错误处理
Can not install 'ij-rpc-client': npm ERR! code ECONNRESET
详细信息如下:
Can not install 'ij-rpc-client': npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/ij-rpc-client failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LJ\AppData\Roaming\npm-cache_logs\2019-11-03T08_31_08_260Z-debug.log
解决办法:
清除、卸载vue缓存
npm uninstall -g vue
npm uninstall -g vue-cli
npm uninstall -g @vue/cli
npm cache clean --force
重新安装
npm install vue
npm install -g @vue/cli
**重点**
查询、更改npm下载地址
npm get registry https://registry.npmjs.org/
npm config set registry http://registry.npm.taobao.org/
npm get registry http://registry.npm.taobao.org/
vue init webpack projectName 报错
错误信息:'git' 不是内部或外部命令,也不是可运行的程序或批处理文件
下载安装git
配置git环境变量,将git命令路径添加到PATH,如:C:\Program Files\Git\bin