**
在windows环境下安装vue脚手架
**
1、安装node环境
(1)进入node官网,下载node,并且进行安装。
(2)如果npm需要安装插件也可以进入npm官网:npmjs.com进行搜索
2、修改npm镜像,加快下载速度(这里使用淘宝镜像cnpm)
(1)安装淘宝cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)查看cnpm安装是否成功
cnpm -v
3、安装vuecli
(1)进入命令行
安装:npm install -g @vue/cli
卸载:npm uninstall -g @vue/cli
(2)查看安装是否成功
vue -V
4、使用脚手架搭建vue项目
(1)Dos窗口输入创建项目命令
vue create demo
补充说明:
如果创建过程中遇到一下问题
ERROR command failed: npm install --loglevel error --registry
解决方法有:
npm cache clean --force
(2)选择手动安装
? Please pick a preset: (Use arrow keys)
default (babel, eslint) //默认安装插件(babel和eslint插件)
Manually select features //手动安装插件
(3)选择安装插件(空格选择需要安装的插件,回车下一步)
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
(4)选择安装的管理依赖包方式
package.json用来管理脚手架所用到的依赖包
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
In package.json //选择这个就可以了
(5)是否保存这些选项为模板
如果经常使用相同配置,可以选择y
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)
(6)搭建成功
如果看到以下关键句,表示项目搭建成功
$ cd demo
$ npm run serve
(7)跳转到demo文件夹里面
(8)启动项目运行命令
npm run serve
(9)最终开启了项目运行,搭建完成
App running at:
Local: http://localhost:8080/
Network: http://192.168.1.3:8080/
如果项目需要用于生产环境,需要将项目打包
npm run build
**
知识扩展:
**
一、启动项目命令
在package.json中有个
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
修改"serve": “vue-cli-service serve”,
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build"
},
那么项目运行命令就是
npm start
二、下载其他项目,根据配置文件,下载依赖模块node_modules
npm install