vue项目开发的完整流程

一.构建vue.js项目
1. 安装node
https://nodejs.org/en/
下载完成后，下一步–>下一步–>安装完成

验证node是否安装成功:
打开命令行(windows)或终端(mac),在命令行(终端)中输入：
node -v 如果提示出版本信息则说明node安装成功
npm -v 如果提示出版本信息则说明npm安装成功

2. 安装vue脚手架: vue-cli
sudo npm install vue-cli -g
(-g全局安装，全局安装即就将当前的工具安装在了node的安装目录下)

验证vue-cli是否安装成功:
在终端输入vue -V  如果提示出版本信息则说明vue-cli安装成功

3. 创建项目
新建一个存放项目的文件夹，在该文件夹下打开终端
通过下面的简单的Linux命令进入到指定的文件夹：
ls 列出当前所在目录下的所有文件及文件夹
cd xxx 进入到当前目录下的指定的文件夹
cd …返回上一级目录
在指定文件夹下打开终端后，在终端中输入：
sudo vue init webpack my-project
(webpack是官方模版,my-project是自定义的项目名称)
4.下载安装项目依赖
如果在拉取模版时没有下载安装依赖，则需要执行如下操作
1）进入项目所在的项目文件夹
cd my-project
2）通过下面的命令安装依赖：
sudo cnpm install
5.运行项目
在项目文件夹下打开终端,运行下面的命令
npm run dev

**自动打开浏览器问题**
在根目录下找到config文件下的index.js文件，
找到开发环境下的autoOpenBrowser改为true就可以了 

二.项目实战–准备工作

1. 需求分析
2. 项目资源准备(图片/图标字体制作IcoMoon)
3. 项目目录设计
4. mock数据准备
5. css初始化
   5.1 在static下创建css文件夹,添加reset.css文件
   参考:
   1.Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset)
   2.http://cssreset.com
   5.2 在index.html文件中,用标签引入reset.css
6. 移动端视口设置(移动端项目需要设置)
   在index.html文件中,通过标签设置如下:

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

7. 在VSCode中添加.vue模版
   三.项目实战–页面骨架开发
8. 划分模块
9. 拆分组件