VUE初めての経験 - ブラウズ、小規模なプロジェクトのカテゴリを読んで

少しケースを行うにはダークホースに従ってください
読書、書籍、小さなクラスのプロジェクトを行うには準備ができていますか?

まず、彼は(githubの愛らしい新しい使用)の前で言いました
ローカルプロジェクトはgithubの上でホストされていること

1. .gitignore node_modulesに無視されているもののファイルの定義

  • 自分がそのようなスペースまたはタブキーTabキー、スペースが4または2であるとして、関連の設定を、webstorm置くフォルダであり、これは、.ideaでwebstormであり、これはアップ.ideaアップロードする必要はありません)
  • また、そこに.vscode
  • .git(このフォルダには、いくつかのバージョンを保存しました)

2.は、LICENSEオープンソースライセンス(MUIのここではコピー)をreadme.mdています

  ほとんど読んで知ることができる「との類似点主流のオープンソースライセンスの違いは何ですか」(https://www.zhihu.com/question/19568896)
3.地元の倉庫を作成します。
  1.gitは、ファイルを生成します初期化するinitの.git
  2.git状況
  3.git追加。
  「情報を提出する」コミット3.git -m
  4.gitステータス应该のコミットする分岐マスター何で有、作業ツリーきれい
  上記の手順は、ローカル.gitを、外出先に提出され、そして遠隔倉庫は、任意の関連付けを行っていません
  公開鍵を表示します。マイコンピュータ]> [ユーザー]> 17500>の.ssh> id_rsa.pub
  パークビュー特定のステップのブログの書き込み。
クラウドコードにアップロード変更されたコードに従来のように4    1. Gitの追加。
  2. gitの「情報を提出する」-mコミット
  3. Gitのプッシュ
第二に、概要
私の最初の経験VUEは、の内容は重要ではなく、オープンソースのインターフェースの障害が一般的です。

第三に、詳細なプロセス
1. 一般的なレイアウトを 準備モデルを適用し、NPM I App.vue根部の3つのコンポーネントに分割されています
1.トップヘッダー
2.中间路由区域router-view
3.底部Tabber

当点击路由连接的时候,切换地址栏,地址栏的改变被路由给监听到,路由监听到则会进行路由的匹配,匹配到之后就展示对应的组件,组件放到rouer-view中

 怎么把Vue.app放到页面中:
在入口文件中:
import Vue 并且new一个vue实例
import app组件 并渲染
  
import Vue from 'vue'
import app from './App.vue'

var vm = new Vue({
el:'#app',//指定要控制的哪一个元素
render:c =>(app)//render函数,里面有一个c形参,调用一下,渲染app组件
})
 
 
2.顶部Header
使用mint-ui组件,打开mint-ui(http://mint-ui.github.io/#!/zh-cn),开始使用,找到header
使用<mt-header>,则要在 main.js 中按需导入Mint-UI中的组件

import { Header} from "mint-ui"
Vue.component(Header.name,Header);//手动注册
 
注意:这里的header固定定位了,不占标准流了,下面的元素就顶上去了,所以可以给最外层这个大盒子加个padding-top(在App.vue的框住三个区域的div添加一个class="app-container",在下面style中写样式)
3.底部Tabber

哈哈哈因为mint-ui太丑了,所以用mui
找到mui-master文件夹>examples>hello-mui>examples>tabber.html
右键检查

  1. 复制 <nav>中的内容
  2. 在main.js中导入MUI的样式
`import './lib/mui/css/mui.css'`
  3. 更改图标
- 查看>examples>hello-mui>examples>icons.html和icons-extra.html
- 购物车图标用到了icons-extra.css,所以需要 手动将用到的文件放到 lib mui css中,在main.js中导入一下`import'./lib/mui/css/icons-extra.css'`
- 同时这个css依赖于mui-icons-extra.ttf字体库,所以也把他手动放到lib mui fonts下
  4. 把下面的tabbar改成路由链接
- 检查package.json中有没有 vue-router的包(npm install vue-router)
- 有的话就可以配置路由了,在main.js导入
//4.1导入路由的包
import VueRouter from 'vue-router'
//4.2安装路由
Vue.use(VueRouter)
//4.3导入自己的router.js路由模块
import router from './router.js'
//4.4 把router写在vm实例中,挂载路由对象到VM实例上
router
- 打开App.vue,在底部Tabbar区域中,将 <a>标签改成<router-link>,同时href属性也改成 t0 , to="/home"
- 选中路由高亮
在router.js中,
var router = new VueRouter({
routes:[
],
linkActiveClass:'mui-active'//覆盖默认的路由高亮的类,默认的类叫做router-link-active
})
高亮就完成了!

おすすめ

転載: www.cnblogs.com/irenehanb/p/10964199.html