文章目录
Webpack构建Vue.js项目
使用Webpack构建Vue.js项目时，需要依次输入项目的基本信息，如下图所示：
| 基本信息 | 信息介绍 |
|---|---|
| Project name vuedemo1 | 项目名称 |
| Project description A Vue.js project | 项目描述 |
| Author Lw中 [email protected] | 项目作者 |
| Vue build standalone | Vue项目构建：运行+编译还是仅运行 |
| Install vue-router? Yes | 是否安装vue-router |
| Use ESLint to lint your code? No | 是否使用ESLint |
| Set up unit tests No | 是否使用单元测试 |
| Setup e2e tests with Nightwatch? No | 是否使用Nightwatch e2e 测试 |
Should we run npm install for you after the project has been created? (recommended) npm |
是否在项目创建成功后自动执行“npm install”安装依赖 |
WebPack下的Vue.js项目文件结构
使用WebPack构建Vue.js成功后，找到项目所在目录，项目文件结构如下图所示：
| 文件夹名称 | 简介 |
|---|---|
| build | 编译所用到的脚本 |
| config | 各种配置 |
| node_modules | node第三方包 |
| src | 源代码 |
| static | 静态文件 |
| index.html | 最外层文件 |
| package.json | node项目配置文件 |
接下来介绍一下比较重要的src文件夹，文件夹所包含的内容如下：
| 文件名称 | 简介 |
|---|---|
| assets | 文件夹用到的图片都可以放在这里 |
| component | 视图和组件所在文件夹 |
| router | 路由文件，定义了各个页面对应的url |
| App.vue | 二级页面模板，所有的其他Vue.js页面都作为改模板的一部分渲染出来 |
| main.js | 没有实际的业务逻辑，但是为了支撑整个Vue.js框架，很有必要存在 |
Vue项目中添加新的路由并访问
在文件目录src中的component下创建一个新的vue页面，写入测试代码
打开src下的router目录下的index.js文件，增加新的路由代码
通过npm run dev项目运行后，输入localhost:8080/#/say_hi，结果如下图所示：
Vue项目中使用axios发送请求的方式
axios请求方式如下图所示：
Vue UI的使用
Vue UI是一个可视化图形界面方便你去创建、更新和管理项目的方方面面。
命令行界面打开vue ui
浏览器中输入http://localhost:8003
使用vue ui创建新项目
项目文件夹中输入项目名称，其他不用改，点击下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由Router、状态管理Vuex，去掉js的校验。
项目创建成功
Vue项目中添加Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,网站快速成型工具。
安装element的命令很简单，如下所示：
# 切换到项目根目录
cd vueblog
# 安装element-ui
cnpm install element-ui --save
然后我们打开项目src目录下的main.js，引入element-ui依赖
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)