Vue2.0 WEB项目开发流程

1.配置node环境

1）下载node安装包并安装

2）安装完成之后在配置node的环境变量

3) 查看node是否安装成功：

win+r 进入输入cmd进入命令行，输入 node -v 命令 ，安装成功之后会显示node的版本号

在命令行，输入 npm -v 命令 ，查看npm的版本号

2.安装webpack

命令行工具输入：npm install webpack -g 全局安装webpack，安装完后输入：webpack -v，出现版本号则标识安装成功

3.安装vue-cli脚手架

全局安装vue脚手架，命令行工具输入：npm install vue-cli -g，安装完后输入vue -V（此处必须大写“V”），出现版本号则标识安装成功

4.创建vue项目

1）打开命令行工具，进入放项目的文件夹，输入命令：vue init webpack mysite（其中webpack是模板名称），会在当前目录下生成一个mysite项目文件夹

2）进入项目文件：cd mysite，安装项目依赖：npm install（如果失败，则用淘宝镜像源：cnpm install）

3）安装vue路由模块vue-router和网络请求模块vue-resource：cnpm install vue-router vue-resource --save

4）启动项目npm run dev，默认会直接打开一个页面，或者在浏览器中输入http://localhost:8080

5.项目目录结构

bulid目录是webpack相关配置文件，已配置好，一般不需要修改

config是vue项目的基本配置文件，配置端口，打包输出等

node_modules是项目中安装的依赖模块

src项目核心文件，自己写的代码都在这里

>>assets静态资源，如css，less，sass，一些外部的js文件以及图片等

>>components公共组件

>>router路由，配置项目路由

>>App.vue根组件

>>main.js入口文件

static静态资源

test测试文件夹

6.使用element-ui前端ui组件

1）打开命令提示工具，安装element-ui：npm i element-ui -S

2）main.js中引入element-ui

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

6.打包上线

项目开发完成后，在命令行中输入npm run build进行打包，打包完成后会生成dist文件夹，可以本地直接查看。

项目上线时，将dist文件夹放到服务器即可