vue-cli3 构建一个vue项目（全过程）——1

vue-cli3 构建一个vue项目（全过程）——1

一、环境安装

1、Node安装

​ 也就是获取npm指令，可以直接点击这里前往下载安装，或者直接搜索node.js进行安装，网上版本很多，可以自行选择，目前node14版本比较不容易出现版本问题。

​ 可以在命令行中用node -v来查看Node版本：

$ node -v
v14.17.3

2、vue-cli安装

​ 本文介绍的是vue-cli3，和vue-cli4目录结构上有所不同。如果之前有安装过其他版本的vue，可以先进行卸载，使用命令行npm uninstall -g @vue/cli。没有安装过可以直接安装：

npm install -g @vue/cli@3.11.0		::安装vuecli3
npm install -g @vue/cli			::安装最新的vuecli

​ 如果npm下载比较慢可以安装淘宝镜像cnpm:

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

​ 之后npm指令可以用cnpm代替即可。

​ 安装完成后可以用以下命令查看vue版本：

$ vue -V
3.11.0

二、开始创建项目

1. 在你想要创建项目的目录下启动命令行，运行以下命令来创建项目：

vue create hello-world

​ 这个hello-world可以换成你想要的项目名字。注意：如果你是在Windows上使用Git Bash，要通过 winpty vue.cmd create hello-world 这个命令来创建，不然会没有交互提示。

2. 默认（default）还是手动（Manually）创建项目，用小键盘上下键和回车进行选择即可，默认模式适合快速创建一个简单的新项目，手动提供更多的选项比较适合实际项目需要:

? Please pick a preset:
> default (babel, eslint)
  Manually select features

3. 接下来介绍手动（Manually）模式的选择，小键盘方向键移动，用空格键选择，回车键最终确认：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript			//是否支持使用TypeScript编写源码
 ( ) Progressive Web App (PWA) Support			//渐进式Web应用支持
 ( ) Router			//是否支持vue-router
 ( ) Vuex			//是否支持vuex
 ( ) CSS Pre-processors			//是否支持 CSS 预处理器
 (*) Linter / Formatter			//是否支持代码风格检查和格式化
 ( ) Unit Testing			//是否支持单元测试
 ( ) E2E Testing			//支持 E2E 测试

4. 选择了CSS预处理则选你需要的模式即可，没有选择则接下来选择代码检查模式，这是对代码编写时书写格式要求的严格程度，如果你对自己代码要求不严格或者没有规定可以只选第一个：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

5. 选择语法检查的方式，也就是你的代码在什么时候进行检测，我选的是第一个。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save			//保存时就进行检测
 ( ) Lint and fix on commit			//提交时进行检测

6. 配置文件存放的位置，我选择的是第二个。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
> In dedicated config files			//放在一个独立的文件夹里
  In package.json			//放在package.json里

7. 是否保存这次设置以便于下次使用。

? Save this as a preset for future projects? (y/N)y
? Save preset as:vue3			//将预设另存为

8. 回车，开始等待创建.

Vue CLI v3.11.0
✨  Creating project in D:\work\hello-world.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[            ......] | finalize:postcss-value-parser: sill finalize D:\work\hel

三、运行项目

cd hello-world		//进入到项目目录
npm run serve		//启动项目

​ 如果你不是自己创建的项目而是下载了别人的项目，run之前需要先安装依赖：

npm install		//安装依赖，也就是node_modules
npm run server		//然后再启动项目

四、最终启动画面

五、项目文件结构

vue3的基本目录结构如下：

├── public                             	存放静态资源，会被复制到输出目录(dist)中
   │   ├── index.html                 	入口页面
   │   ├── image                 	静态图片文件夹
├── src                             	项目源码目录    
   │   ├── main.js                    		入口js文件
   │   ├── App.vue                    		根组件
   │   ├── api                        	与后端交互使用相关方法和配置
   │   ├── components                 	公共组件目录
   │   │   └── Title.vue
   │   ├── assets                     	资源目录，这里的资源会被wabpack构建
   │   │   ├── font                  	公用字体文件、字体图标
   │   │   └── img                   	图片存放目录
   │   ├── common                     	公用文件夹 存放公用js css 工具类等文件
   │   ├── libs                       	存放第三方插件、库等。
   │   ├── routes                     	前端路由
   │   │   └── index.js
   │   ├── store                      	应用级数据（state）
   │   │   └── index.js
   │   └── views                       	页面目录
   │       ├── Hello.vue
   │       └── NotFound.vue
├── package.json                     	npm包配置文件
├── .eslintrc.js                       	代码规范配置页面
├── vue.config.js                    	webpack和反向代理相关配置

六、项目的编写

​ 此时已经成功运行了vue项目，接下来就是对项目进行编写。项目编写的详细流程请看这里：
文章正在写…