搭建前端项目步骤及用到的工具及命令

准备工作：

1.检查nodejs是否安装

命令:node -v
nodejs的作用：用来解析前端代码。

2.查看npm版本及当前配置的镜像源

命令：
npm -v # 5.6.0
npm config get registry # 查看当前配置的镜像源
npm的作用：管理第三方库（jQuery、Vue、Element-UI等）。

3.检查Vue-cli脚手架是否安装

命令：vue --version或vue –V
安装Vue-cli脚手架命令：
npm install vue-cli -g

创建Vue项目：

1.基于webpack模板初始化vue项目

命令：vue init webpack jt （四个yes，其他都n）
webpack的作用：资源的合并、打包、压缩及项目的管理发布等。

2.使用HBuilder开发工具打开项目目录

Vue项目加载的过程：
index.html->main.js->App.vue->index.js->HelloWorld.vue，其中

index.html是页面入口，通过id=”app“属性和主程序挂载。

main.js是程序入口，通常在main.js中创建vue实例，挂载点el: ‘#app’，并定义一个根组件components: { App }。

App.vue是根组件，根组件中的部分会将路由相关内容渲染在该地方。

根组件包含三部分内容：
1.部分：会替代index.html中挂载部分内容。
2.