Bootstrap

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

准备工作:

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.

;