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

第一步:安装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组件页面上调用标签名即可使用

 

 


阅读更多
想对作者说点什么? 我来说一句

python自动打包成单文件工具

2013年07月11日 8.07MB 下载

创建及使用ini文件的Perl组件

2006年02月23日 37KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭