[VUE]通过脚手架创建Vue项目

通过脚手架创建Vue项目

1. 检查自己电脑上是否安装了node

点击开始-运行-cmd(win+R),输入node如果出现版本号,则安装成功。由于新版的node.js已经集成了npm,所以之前npm也一并安装好了。但是也可以检查npm是否安装成功。
1

2. 检查是否安装了vue

同意通过开始-运行-cmd(win+R)进入,输入vue -V,如果出现版本号,则安装成功。
2

3. 打开文件夹

选择一个文件夹,打开命令提示符(在文件夹下,按住shift+鼠标右键,此时会出现一个“在此处打开Powershell窗口”的选项,点进行)
3

4. 创建项目名字

通过“vue creat 项目名称”来创建vue项目(注意:项目名称不能是中文)
4
此时有四个选项可以选:

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

可能你要创建的时候显示无法加载文件:

  1. 用管理员的身份去运行Powershell
  2. 执行命令:get-ExecutionPolicy(取得shell的当前执行策略),此时显示Restricted(表示状态是禁止的)
  3. 执行命令:set-ExecutionPolicy RemoteSigned
  4. 执行命令:get-ExecutionPolicy,显示RemoteSigned
    此时,就可以创建了。

5. 自定义vue功能模板

5
出现以上界面后,可以通过键盘上下健来控制选哪一项,若确定选该项,则按空格键选择确定,功能选择如上图所示,选完后按回车键进入下一环节。

6. 选择版本号

6
这里为了追求稳定,我们可以选择vue 2版本。

7.选择路由

7
是否选择历史路由,在这里我们用键盘打n,表示否。

8.选择CSS拓展

8

选择所需要使用的 CSS 预处理器:我选的是Less。

9.选择ESLint 语法规则

我选的是 ESLint + Standard config

10.选择 lint 功能

10
我选的是选择 Lint on save。这样在 Ctrl + S 的时候能检测代码是否符合规范。

11.选择配置文件

11
他问的是第三方插件的配置选项要放到哪个配置文件中,我选的是In dedicated config files,表示放在独立的配置文件。

12.选择预设

12

是否把刚才所有的操作保存为预设,方便下次直接基于预设,一键生成项目。我选的是y

13.为预设取名字

13
为预设取一个的名字:(建议英文)

14.创建项目中…

14
15.创建成功
15

15.运行项目

输入指令:

cd code
npm run serve

15
运行成功:
运行成功

16.项目可视化

复制两个网址其中一个,在浏览器中打开,就能获得如下界面:
项目网址
到这里就表示Vue项目创建成功!

猜你喜欢

转载自blog.csdn.net/Lailalalala/article/details/126225746