【Vue】Vue 项目搭建

文章目录

• ​​一、NodeJs 下载及配置​​
• ​​二、全局下载项目脚手架​​
• ​​三、创建项目​​
• ​​四、启动项目​​

一、NodeJs 下载及配置

本节内容参见本人博客：【Vue】Nodejs下载与安装

测试安装版本：

​​返回顶部​​

二、全局下载项目脚手架

打开​​cmd​​输入如下命令全局下载项目脚手架：

# 全局下载项目脚手架
npm install -g @vue/cli  # 注意是cli
# 下载好后检查版本

​

​​返回顶部​​

三、创建项目

本项目使用的是​​VSCode​​编辑器，没有的小伙伴可以​​点击此处下载​​！（hccz）

在​​VSCode​​中打开 ​​terminal​​ 把​​cmd​​的路径切换到指定路径(你要创建的项目目录)下: ​​vue create 项目名​​

G:\Projects\VsCodeProject\vue>vue create app

（1）选择项目配置模板 ，选择第三项自主选择你项目所需的配置

（2）选择项目配置选项 勾选所需要的模块

? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA)

（3）选择想要开始项目的​​Vue.js​​版本 选择 ​​3.x​​

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview)

（4）是否用​​history​​模式来创建路由 ,直接回车默认项目

? Use history mode for router? (Requires proper server setup for index fallback in pr
oduction) (Y/n)

（5）选择​​CSS​​ 预处理类型 ,选择​​LESS​​

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass)

（6）选择代码校验会犯,选择第一项 ,只进行报错提醒

? Pick a linter / formatter config: (Use arrow keys)

（7）询问项目的什么时候校验格式(第一个是保存时，第二个是提交时)，选择第一个

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to 
invert selection)

（8）询问项目的配置文件放在那里 (1.独立文件 2.package.json中)，选择第一个

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

（9）是否保存配置当做后续项目的可选配置,我们选择不保存

? Save this as a preset for future projects? (y/N)

（10）之后便会自动帮我们创建工程，等待即可，最终如图所示：

​​返回顶部​​

四、启动项目

按照给出的提示：

• 把​​cmd​​的路径切换到你项目名下
• ​​npm run serve​​ 启动项目

点击链接进行访问：

至此​​vue​​基本项目搭建完成！

​​返回顶部​​