生成单文件组件和组件嵌套步骤

第一步：安装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

页面跳转

把超链接改成：点击的文字

 

 

 

打包单文件应用

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组件页面上调用标签名即可使用