码迷,mamicode.com
首页 > 其他好文 > 详细

跑动一个vue项目的完整步

时间:2018-08-25 14:34:57      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:htm   pack   代码   mint   路径   码代码   target   href   webpack   

一、配置vue环境

这里可以参见别人写好的一篇,个人感觉非常详尽https://www.jianshu.com/p/4f744c935e1c

值得注意的是在配置项目的名称以及一些相关属性的时候,以下两项要特别注意

技术分享图片

Projectname这里设置的名称会在项目的title中展示,如果你后来重新设置了title也会先展示它,但这里似乎不可以使用中文,目前还没有找到好的解决办法所以先用loading代替

这个问题找到解决方案了(实在是我太蠢了),直接到最后dist里面的index.html内改title就好了

ESLing如果选择yes的话会导致vue项目执行的时候非常严格,包括多一个空格它都会报警告,非常讨厌,所以选择no,当然如果你实在不小心选择了yes也是有办法的,只需要在webpack.base.conf.js中吧引用ESLing的地方注释掉就好,见下图

技术分享图片

当你跑完一系列步骤的时候我们就需要利用cil脚手架安装插件了,这里我选择了安装jq和mint(mint为UI样式,后面vue已经不维护它了,所以尝试一下新的ui框架吧)

cnpm install jquery --save
cnpm i mint-ui --save

 二、配置路由

安装完环境之后呢,我们就可以开始码代码了

初次接触vue实在搞不懂他这个文件夹之间的关系(现在我也不是很明白只是能勉强搭项目),所以这里先写一下我现在搭项目的文件路径

技术分享图片

具体文件路径就如上图,下面我们开始讲一下引入iconfont和引入公共部分js

a.引入iconfont

到iconfont的官网上下载样式,然后把下载好的相关文件放入文件夹下,最后在app.vue

引入公共部分js

跑动一个vue项目的完整步

标签:htm   pack   代码   mint   路径   码代码   target   href   webpack   

原文地址:https://www.cnblogs.com/yili-54944/p/9512532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!