通过脚手架创建Vue项目

第一步 准备工作

---

 

1.下载安装node.js

验证是否安装的方法，在命令行输入node -v

2.安装vue

在命令行输入npm install -g @vue/cli

查看vue版本号 npm vue --version

如果vue版本太低，先卸载vue低版本  npm uninstall vue-cli -g

 

 

第二步  创建vue项目

---

 

1. 打开要创建路径

2-1.vue cli3版本输入vue create test创建名为test的项目

　接下来会问你一系列的问题

　　please pick a preset:(use arrow keys)//选择使用什么样的工具，两个选项：

　　　　1.default (babel,eslint)　　//默认

　　　　2.manually select features　　//自定义，按空格选中

　　where do you prefer placing config for babel, postcss，eslint,etc.?(use arrow keys)　　//每一个配置都生成一个配置文件还是都生成在package.json中

　　　　1.in dedicated config files　　//在专用的配置文件

　　　　2.in package.json　　//在package.json

　　save this as a preset for future projects?(y/n)　　//保存刚刚选择的配置

　　　　1.y

　　　　　　save preset as:　　//保存配置的名字

　　　　2.n

　　等待安装……

　　安装完成后，输入cd test进入项目文件夹中

　　npm run serve启动项目

 

2-2.vue cli2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

　接下来会有如下提示

　　project name（工程名）:回车
　　project description（工程介绍）：回车
　　author：输入作者名
　　vue build（是否安装编译器）:回车
　　install vue-router（是否安装vue路由）：回车
　　use eslint to lint your code（是否使用eslint检查js代码）：n
　　set up unit tests（安装单元测试工具）：n
　　setup e2e tests with nightwatch（是否安装端到端测试工具）：n
　　should we run npm install for you after the project has been created? (recommended)：回车。

 

 

第三步 启动项目

---

 

• 进入项目目录：cd demo
• 安装项目所需要的依赖：npm install
• 启动项目：npm run dev

启动成功，浏览器打开：localhost:8080，即可看到vue项目。

---

 

目录结构

 

---

 

 

 

package.json

---