前端架构之初始化vue 2.x项目

环境要求

1. 检查是否安装node.js运行环境

//终端输入
node -v

2. 检查是否安装npm和cnpm包管理程序

//终端输入
npm -v
cnpm -v  // 淘宝镜像专用通道

3. 检查是否安装webpack构建工具

//终端输入
webpack -v // 这个必须是项目里有安装，然后到项目目录下才能用这个命令检查版本
npm webpack -v // 注意这是查询安装全局的webpack

4. 检查是否安装vue-cli手脚架

npm install vue  // 安装vue
//终端输入，这里是大写的"V"
vue -V

确定以上环境都没问题后，那么我们就往前走，构建项目开始。

构建项目

第一步：直接在code目录（本人代码项目习惯）右键选择Git Bash Here(本着已安装git) 你们看着办
第二步：在终端开始安装命令

//终端输入,"project"是项目名称,大家随意，不要中文就行
vue init webpack project

Administrator/d/code
$ vue init webpack project--------------------- 安装项目命令

? Project name (project) --------------------- 项目名称
? Project name project
? Project description (A Vue.js project)--------------------- 项目描述
? Project description A Vue.js project
? Author  xiaomai--------------------- 创建项目人
? Author xiaomai
? Vue build standalone
? Install vue-router? (Y/n) Y --------------------- 是否安装路由，一般都是装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n--------------------- 是否开启严格代码编写格式ESLint，新手建议不用
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) Y--------------------- 设置单元测试，这里你可以选择n
? Set up unit tests Yes
? Pick a test runner (Use arrow keys)
? Pick a test runner karma--------------------- 直接回车就好
? Setup e2e tests with Nightwatch? (Y/n) y
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM--------------------- 一般直接回车就好
  Yes, use Yarn
  No, I will handle that myself

打开根目录下的package.json你会看到vue依赖版本2.x

如果需要1.0版本终端命令：vue init webpack#1.0 project
别问我是不是3.x同理创建，别逗了，暂时只有2.x和1.x，反正换成3你也创建不了，可以说3.x需要参考其他具体教程
打开根目录下的package.json你会看到vue依赖版本1.x

第三步：启动项目
1. 进入项目目录

cd project

如果没有安装依赖就执行这一段命令，否则请忽略这段

npm i

2. 进入项目目录

npm run dev

3. 浏览器输入以上截图红色框起来的地址