从头到尾创建一个vue2项目

一、首先你需要有node环境

下载地址:https://nodejs.org/en/ 安装过程——详细步骤

二、安装vue的脚手架

安装工具只须要安装一次即可。

vue是个框架， vue-cli是vue项目的创建工具。

1、检查vue-cli是否已经安装, vue -V

C:\Users\jerry>vue -V
@vue/cli 5.0.8

2、如果已经安装，先删除vue-cli：npm uninstall @vue/cli

3、安装vue-cli：npm install -g @vue/cli

注意：node版本必须大于8.9, node -v

2、创建项目

1、打开命令行控制台，切换到将要创建项目的目录

2、运行创建 vue项目命令: vue create 项目名称

选择创建的模板，选择第三个选项

第一个选项：使用vue3 + babel + eslint创建项目

第二个选项：使用vue2 + babel + eslint创建项目

第三个选项：自定义模板，可以选择想要的插件

? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> 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 //ts语法支持
( ) Progressive Web App (PWA) Support //web程序 PWA
( ) Router //路由
( ) Vuex //状态机
( ) CSS Pre-processors //css预处理器
( ) Linter / Formatter //语法检查器
( ) Unit Testing //单元测试
( ) E2E Testing //单元测试

选择vue的版本

Choose a version of Vue.js that you want to start the project with
3.x
> 2.x

选择配置文件的方式

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files //单独一个配置文件
In package.json //所有配置放在package.json中

是否将本次创建项目所选的选项保存下来，以供下次直接使用。

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

3、运行项目

运行命令：npm run serve

运行成功后的提 示：

DONE Compiled successfully in 17378ms 15:07:00



App running at:
- Local: http://localhost:8080/
- Network: http://10.211.55.3:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

npm run serve命令的由来

package.json中配置的script为我们命令行运行时用的名称，如下：

"scripts": {
"serve": "vue-cli-service serve", //serve是可以更改的，一般公司会命令为dev
"build": "vue-cli-service build"
},

停止运行：按下ctrl + c，回车