通过脚手架创建Vue项目
1. 检查自己电脑上是否安装了node
点击开始-运行-cmd(win+R),输入node如果出现版本号,则安装成功。由于新版的node.js已经集成了npm,所以之前npm也一并安装好了。但是也可以检查npm是否安装成功。
2. 检查是否安装了vue
同意通过开始-运行-cmd(win+R)进入,输入vue -V,如果出现版本号,则安装成功。
3. 打开文件夹
选择一个文件夹,打开命令提示符(在文件夹下,按住shift+鼠标右键,此时会出现一个“在此处打开Powershell窗口”的选项,点进行)
4. 创建项目名字
通过“vue creat 项目名称”来创建vue项目(注意:项目名称不能是中文)
此时有四个选项可以选:
npm ([Vue 2] less, babel, router, eslint) //只包含特定的 3 个功能(vue2 + babel + eslint)
Default ([Vue 2] babel, eslint) // 默认vue2版本
Default (Vue 3) ([Vue 3] babel, eslint) // 默认vue3版本
Manually select features // 手动选择需要的功能生成模板
我们选择最后一个:Manually select features
可能你要创建的时候显示无法加载文件:
- 用管理员的身份去运行Powershell
- 执行命令:get-ExecutionPolicy(取得shell的当前执行策略),此时显示Restricted(表示状态是禁止的)
- 执行命令:set-ExecutionPolicy RemoteSigned
- 执行命令:get-ExecutionPolicy,显示RemoteSigned
此时,就可以创建了。
5. 自定义vue功能模板
出现以上界面后,可以通过键盘上下健来控制选哪一项,若确定选该项,则按空格键选择确定,功能选择如上图所示,选完后按回车键进入下一环节。
6. 选择版本号
这里为了追求稳定,我们可以选择vue 2版本。
7.选择路由
是否选择历史路由,在这里我们用键盘打n,表示否。
8.选择CSS拓展
选择所需要使用的 CSS 预处理器:我选的是Less。
9.选择ESLint 语法规则
我选的是 ESLint + Standard config
10.选择 lint 功能
我选的是选择 Lint on save。这样在 Ctrl + S 的时候能检测代码是否符合规范。
11.选择配置文件
他问的是第三方插件的配置选项要放到哪个配置文件中,我选的是In dedicated config files,表示放在独立的配置文件。
12.选择预设
是否把刚才所有的操作保存为预设,方便下次直接基于预设,一键生成项目。我选的是y
13.为预设取名字
为预设取一个的名字:(建议英文)
14.创建项目中…
15.创建成功
15.运行项目
输入指令:
cd code
npm run serve
运行成功:
16.项目可视化
复制两个网址其中一个,在浏览器中打开,就能获得如下界面:
到这里就表示Vue项目创建成功!