vue项目搭建(完整步骤)

一、安装环境

1.安装Node.js

下载地址:https://nodejs.org/zh-cn/
建议下载长期维护版
Node.js安装
下载完成后打开,一直下一步最后点击install就好了
这里建议不要安装到C盘
在这里插入图片描述

2.验证Node.js是否安装完成

在终端中输入Node -v
在这里插入图片描述
这里需要注意一下,如果是在vscode的内置终端中输入Node -v 可能会这样
在这里插入图片描述将Vscode全部关闭之后,使用管理员身份打开就好了
在这里插入图片描述

二、安装vue脚手架(vue-cli)

1.安装cnpm

可以通过npm,yarn进行安装,因为我这里安装了Node,Node内置有NPM,所以无需进行安装,如果NPM安装的速度太慢,可以使用淘宝的镜像源(如果NPM安装速度快的话可以直接跳过这一步)

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v:查看安装是否完成

在这里插入图片描述

2.全局安装Vue-CLI

npm install -g @vue/cli  //国外下载
cnpm install -g @vue/cli //镜像源下载(需要安装cnpm)
# OR
yarn global add @vue/cli

检查安装是否完成

vue --version

在这里插入图片描述

三.搭建VUE项目

1.创建文件

vue create(项目名)

在这里插入图片描述
保存的配置:当手动配置完成以后选择是否保存该配置时保存的
自动安装Vue3.x:回车后便会自动安装3.x版本的Vue
自动安装Vue2.x:回车后便会自动安装2.x版本的Vue
手动配置:需要自己手动的去配置自己的喜好
我们这里选择手动配置(↓选择到Manually select features回车选择)

2.选择配置

在这里插入图片描述空格选择,回车下一步!!!
Babel:Babel是一个 JavaScript 编译器。(必选
TypeScript:TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。
Progressive Web App (PWA) Support:渐进式网页应用
Router:Vue.js 的官方路由(必选
VueX:是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
CSS Pre-processors:CSS预处理
Linter / Formatter:代码风格、格式校验(建议有一定基础在选择
Unit Testing: 单元测试,对软件中的最小可测试单元进行检查和验证。
E2E Testing:自动化测试框架
具体需要安装哪些内容,根据自己的喜好进行安装,我这边给一个常用的配置
在这里插入图片描述

3.选择搭建的vue版本

在这里插入图片描述
我这里安装的是2.x的版本,回车下一步。

4.路径模式选择

在这里插入图片描述按需选择我这里是输入Y,回车下一步

5.选择CSS预处理器

在这里插入图片描述因为我一直用的是Sass所以选择的是Sass,在选择配置中如果没有选择CSS Pre-processors,则不会出现这个选择,直接跳过不影响

6.选择ESLint配置

在这里插入图片描述建议选择第三个ESLint + Standard config 标准模式

7.代码格式检查时间

在这里插入图片描述选择第一个Lint on save,保存时检查

8.配置文件存放位置

在这里插入图片描述选择In dedicated config files ,单独的配置文件中

9.是否保存该配置

在这里插入图片描述此处按需选择,如果选择Y则需要输入配置的姓名即可

四.运行VUE项目

cd (项目名)

在这里插入图片描述

npm run serve

在这里插入图片描述
Alt+左键点击就可以打开了
在这里插入图片描述
当看到这个界面就代表搭建成功了!

猜你喜欢

转载自blog.csdn.net/weixin_44748171/article/details/128161310