vueCli3.x脚手架安装步骤

**

在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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值