第一步:安装node.js
一直按下一步
查看是否安装成功:打开命令提示符 – 输入:cmd – 输入:node -v
第二步:安装vue自动化工具
命令提示符 – 输入:npm-install –global vue-cli
当然也可以使用压缩包直接压缩即可,因为他安装下来的跟压缩包里的一模一样,为了节约时间,直接用压缩包的便可
自动化工具其实就是vue生成的项目,在此项目中编写代码
第三步:启动页面
在vue-project地址栏中输入:cmd回车 – 输入:npm run dev回车 – 打开浏览器输入:localhost:8080
第四步:把项目文件拖拽至HBUILDER
第五步:新建组件
Src文件夹 – components – 新建vue文件
第六步:编辑组件内容
在相应的标签中写入html、css、js
注意:要把内容放到div盒子中,不然不会生效
第七步:导出组件至路由
打开自己生成的组件 – 在script标签中加入导出参数(可在HelloWorld.vue中去复制) - 把name值改成自己的文件名
第八步:把组件导入到路由系统
打开:router文件夹下的index.js – 复制import – 把最后一个参数改成自己文件名 – 在下面routers复制一组对象 – 把所有的值都改成组件名
第九步:查看新建的组件
在浏览器地址栏后加上组件名称,例如:http://localhost:8080/myVue
页面跳转
把超链接改成:<router-link to=”/组件的名称”>点击的文字</router-link>
打包单文件应用
1.找到config文件夹 - index.js - build中的最后一个把 /改成 ./
2.打开已经打开了的命令 - Ctrl+C停止掉 - 输入npm run build
3.把dist中的内容拷贝到自己项目中(也就是可以上传到服务器中)
-----------------------------------------------------------------------------------------------------------------
组件的嵌套:
第一步:新建组件
在src – components – 新建vue文件 – 编辑组件内容
第二步:把新组件嵌套到某组件中
例如,我要把A组件嵌套在B组件中。则需要在B组件中编写内容。
打开B组件 – 在script中加上:import A组件名称 from '@/components/A组件名称’ – 在name下面加上components:{ 组件名称 } – 在B组件页面上调用标签名即可使用