文章目录
- 一、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基本项目搭建完成！
返回顶部
