- 新建一个文件夹VueProject,基于该文件夹打开命令行,输入指令【vue create helloworld】
这里的项目命名不支持驼峰,因为HTML标签不区分大小写,但可以使用-分割,例如 first-project。
jwdmac2@QideiMac first-project % mkdir VueProject
jwdmac2@QideiMac first-project % cd VueProject
jwdmac2@QideiMac VueProject % vue create helloworld
- 选择Manually select features(选择特性以创建项目)
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
- Default ([Vue 3] babel, eslint)(默认的vue3脚手架模板)
- Default ([Vue 2] babel, eslint)(默认的vue2脚手架模板)
- Manually select features(自定义选择特性)
通过上下按键选择,按Enter继续
- 勾选项目中所需要的特性,【空格键】选中,这里选Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter等
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to
toggle all, <i> to invert selection, and <enter> to proceed)
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
- Babel (Babel是一个JavaScript编译器,允许开发人员使用最前沿的JavaScript编写代码,然后Babel将其转换为老式的JavaScript,让更多的浏览器能够理解。)
- TypeScript (是 JavaScript 的超集,扩展了 JavaScript 的语法)
- Progressive Web App (PWA) Support (使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能)
- Router (路由器,实现页面直接的跳转)
- Vuex (专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。)
- CSS Pre-processors (一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。)
- Linter / Formatter (代码规范检验工具,代码格式化工具)
- Unit Testing (单元测试 开发者角度)
- E2E Testing (端到端测试 用户角度)
多选,通过上下按键选择,按空格键选中或取消,按Enter继续,默认选中Babel和Linter。
- 选择Vue的版本,这里采用3.x版本
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
❯ 3.x
2.x
- 是否选用历史模式,这里输入n,不选用
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) n
对路由器使用历史记录模式? (需要适当的服务器设置,以便在生产中进行索引回退)(是/否)
- 为当前vue项目选择CSS预处理工具,这里选默认
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Less
Stylus
- 选择 ESLint 代码规范检查级别:ESLint + Standard config
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
- ESLint with error prevention only (基本)
- ESLint + Airbnb config (Airbnb 编码规则)
- ESLint + Standard config (标准)
- ESLint + Prettier (完美)
8.何时进行ESLint语法校验:Lint on save
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all,
<i> to invert selection, and <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
- Lint on save(保存代码时 CTRL+S)
- Lint and fix on commit (提交代码到 git 时)
- babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
- In dedicated config files 在专用配置文件中
- In package.json 在 package.json 中
- 是否将上述配置保存为模板,这里输入n,不保存
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated
config files
? Save this as a preset for future projects? (y/N) n
- 等待安装即可。
安装中
Vue CLI v5.0.8
✨ Creating project in /Users/jwdmac2/Desktop/2023/web-projects/first-project/VueProject/helloworld.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠹ idealTree:helloworld: sill idealTree buildDeps
安装完成
Vue CLI v5.0.8
✨ Creating project in /Users/jwdmac2/Desktop/2023/web-projects/first-project/VueProject/helloworld.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 858 packages, and audited 859 packages in 5m
94 packages are looking for funding
run `npm fund` for details
16 moderate severity vulnerabilities
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
🚀 Invoking generators...
📦 Installing additional dependencies...
added 166 packages, and audited 1025 packages in 1m
148 packages are looking for funding
run `npm fund` for details
20 moderate severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project helloworld.
👉 Get started with the following commands:
$ cd helloworld
$ npm run serve
- 下载完成后,进入 helloworld 文件夹下,运行指令【npm run serve】,编译并启动程序。输入地址:http://localhost:8080/,进入下面页面。
jwdmac2@QideiMac VueProject % cd helloworld
jwdmac2@QideiMac helloworld % npm run serve
> helloworld@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 55721ms 15:07:44
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.50.81:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
13. 项目结构如下:
helloworld # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录,不会被打包影响,会原封不动的输出到dist目录中
├── favicon.ico # 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹
├── assets # 静态资源,通常存放图片等
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── router # 路由控制
└── index.js # 路由配置文件,除非工程中页面数量较大,或路由关系复杂,否则使用这1个文件进行路由管理即可。
├── store # 全局数据存储
└── index.js # 数据存储文件
├── views # 页面视图组件
├── AboutView.vue # About 页面
└── HomeView.vue # Home 页面
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── jsconfig.json # JavaScript 项目的根目录,指定了JavaScript 语言服务提供的功能的根文件和选项。
├── vue.config.js # Vue的配置文件
├── package.json # 依赖包列表
├── README.md # 项目说明
└── package-lock.json # 项目包版本锁定和缓存地址
Vue 脚手架的主要文件
- node_modules :下载的第三方依赖包
- public/index.html : (浏览器入口)浏览器运行的网页
- src/main.js : Vue 脚手架打包的入口文件(App.vue 挂载在这里)
- src/App.vue : Vue 组件页面入口(所有Vue文件最终关联此文件)
- package.json : 依赖包列表,及脚手架配置信息
- dist : 使用 npm run build 命令打包后会生成该目录。