一、vue安装
(1)cdn:使用html写法的时候可以直接引入,虽然引用起来非常的方便,一旦官方修改内容有可能影响项目部分功能。
<script src="https://unpkg.com/vue@next"></script>//现已更新至3.0
当然也可以直接下载官方js文件进行引入,这样就可以避免上述问题了。
(2)npm:使用npm需要下载node.js 下载地址:https://nodejs.org/zh-cn/download/
$ npm install vue@next
(3)命令行工具 (CLI):本文主要讲述CLI脚手架的创建方式
二、安装VueCLI包
在安装前需要配置全局环境,官方在官网中有关于以前版本的警告
包名称从 更改vue-cli
为@vue/cli
。如果您vue-cli
全局安装了以前的(1.x 或 2.x)软件包,则需要先使用npm uninstall vue-cli -g
或卸载它yarn global remove vue-cli
。
节点版本要求
Vue CLI 4.x 需要Node.js 8.9 或更高版本(推荐 v10+)。您可以使用n、nvm或nvm-windows在同一台机器上管理多个版本的 Node 。
(1)全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
(2)查询版本:可以确认是否安装成功
vue --version
(3)升级全局
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
三、 创建项目
在本地的git文件夹中cmd输入下面代码,vue_demo:是脚手架项目文件夹名称
vue create vue_demo
文件创建以后会弹出配置选项,如果选择第一个(Vue 2)或第二个(Vue 3),直接默认配置脚手架,第三个是手动选择要素
四、手动选择要素(Manually select features)
1.选择括号带 “ * ” 的即可,上下键移动 “ > ” 光标,空格键选中或取消。选择完成点击回车(enter)
2.这里选择Vue框架版本,选中回车,2.x与3.x后面步骤都是一样的
3.路由器历史模式,键盘输入Y,回车
4.ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,选择严格模式(ESLint + Prettier),当然大家也可以选择标准模式(ESLint + Standard config)
5.选择语法检查方式,这里选择(Lint on save)回车
6.配置文件放置位置选择,
In dedicated config files 等同于每个文件单独放置,
In package.json 全部放置package.json 文件中(我们选择package.json)
7.询问是否将此保存为将来项目的预设?输入y,回车
8.预设起名(填写保存预设,下次可以按本次选择直接配置。不写直接回车,不保存本次预设记录)
9.安装完毕后根据提示,进入文件夹,启动命令启动项目
cd vue_demo:进入文件夹
npm run serve:启动Vue
以上是我一步步截屏写的,如有错误大家可以留言指点,有不懂的地方留言我会回答。