准备工作:
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.