安装vue-cli

1. 安装node.js

下载Node.js
Node.js地址
安装Node.js
- 安装地址推荐默认C盘
- 其他的都是默认
测试是否安装成功Node.js
- 键盘win+R键打开运行，输入cmd
- 输入：node -v 查看版本，如果安装成功则可以查看
测试npm是否安装成功
- npm -v
- 查看版本，如果成功，就有版本号

2. 全局安装nrm（用来切换下载源）

npm install nrm -g 安装成功之后
nrm ls 可以查看nrm里面的内容
nrm use taobao 更改到淘宝的镜像下载源

3. 全局安装脚手架（vue-cli)

npm install @vue/cli -g
vue -V 可以查看vue-cli的版本

4. 如果有yarn安装时可能会出现一些更改

npm root view -g 查看安装根目录
在这里可以删除yarn等

5. 创建项目

选择再什么地方创建项目，在对应目录的地址栏全选，键入cmd，直接打开对应文件地址的窗口
vue create 项目名字 创建项目
配置选项
- 1、选择预设
  - Please pick a preset: (Use arrow keys) 使用键盘上下键选择回车确定
  - default (babel, eslint) 默认只安装babel和eslint
  - Manually select features 手动选择 //重要
- 2、手动选择插件（1,4,5,6）
  - Check the features needed for your project: 空格选择，a全选，i反选回车确定
  - Babel 将高级版本ES转换为浏览器识别的JS语法，ES6->ES5
  - TypeScript JS的超集，提供了JS面向对象支持
  - Progressive Web App (PWA) Support PWA使应用向原生APP
  - Router 路由、请求所对应的地址
  - Vuex 数据状态管理器、用于多页面传参
  - CSS Pre-processors CSS预处理，将高级CSS语法转换为浏览器识别CSS语法
  - Linter / Formatter 代码检查工具,语法检测，严格，项目开发推荐
  - Unit Testing 单元测试
  - E2E Testing 端端测试
- 3、选择路由模式
  - Use history mode for router? 使用history路由模式吗?
  - History模式 yes
  - Hash模式 no 路由的后方有#只刷新部分内容
- 4、选择CSS预处理
  - Pick a CSS pre-processor
  - Sass/SCSS (with dart-sass)
  - Sass/SCSS (with node-sass)
  - Less // 选择
  - Stylus
- 5、选择插件的配置存放位置
  - Where do you prefer placing config for Babel, ESLint, etc
  - In dedicated config files 独立的配置文件
  - In package.json 直接放在package.json中
- 6、是否保存预设
  - Save this as a preset for future projects
  - N不保存
等待安装完成

进入创建好的项目文件夹

cd/ 项目名

运行项目—不要关闭命令窗口

npm run serve

浏览器运行—命令窗口会给出运行地址

如：http://localhost:8080

安装完成之后的文件说明

Vue-vue-cli的安装相关推荐

vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
了解如何使用Vue.js CLI
Interested in learning Vue.js? Get my ebook at vuehandbook.com 有兴趣学习Vue.js吗? 在vuehandbook.com上获取我的电子 ...
Vue相关软件的安装
目录 1.安装Nodejs服务器. 1.1.下载node.js 2.2.检查有没有安装成功node.js 2.2.1.按winds+r,输入命令cmd 2.2.2.打开之后,在cmd输入命令node ...
VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
vue介绍及环境安装
认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...
vue ：引入、安装 jquery 、bootstrap
一.vue安装jquery 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.新建一个vue工程. 2.在项目文件夹下,使用命令 npm inst ...
cmd命令 - vue项目：单独安装vue-router
cmd命令 - vue项目:单独安装vue-router 今天做测试的时候,发现之前的vue项目忘记安装vue-router 为了让项目能重新跑起来,只能另外安装一下vue-router 这里,总结一 ...
如何进行 Vue.js 框架的安装？
cmd如何进行 Vue.js 框架的安装? 步骤总结: 本地磁盘建立对应的空文件夹:举例:路径如C:\个人\vuejs\secondvue 电脑单击"开始",搜索程序**" ...
vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的解决方法参考文章: (1)安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的 ...

Vue-vue-cli的安装

Vue脚手架---vue-cli的安装

安装vue-cli

1. 安装node.js

2. 全局安装nrm（用来切换下载源）

3. 全局安装脚手架（vue-cli)

4. 如果有yarn安装时可能会出现一些更改

5. 创建项目

进入创建好的项目文件夹

运行项目—不要关闭命令窗口

浏览器运行—命令窗口会给出运行地址

安装完成之后的文件说明

Vue-vue-cli的安装相关推荐

最新文章

热门文章