vue開發流程

在安裝node.js

測試安裝  在cmd 下輸入node   如查能正確輸出命令提示符，代表安裝好node 

測試安裝npm -v   若是能成功出現版本信息表示安裝好npm

安裝配置 G碼雲   或 gitbub      在https://gitee.com   註冊好代碼倉庫   方便之後代碼拖管

在我的主頁，左側新建項目 ，（projects）右邊的加號

在新建倉庫填寫相應內容，語言選 javascrtipt    開源許可選擇 mit   倉庫私有，選擇REAQDME.MD初始化倉庫

 

而後安裝git    

測試安裝 cmd輸入 git --version    若是能正確顯示版本號，或右健有git 相關菜單表示安裝正常

 

 

關聯線上線下，git代碼相應包

在我的設置 SSH 公鑰配置：詳情 點   怎麼生成公鑰 ：

右健->bush->輸入上面那些命令。。。。。。

ssh-keygen -t rsg-(fxgwan@163.com)  //生成對應key

cat ~/.ssh/id_rsa.pub     //杳看 key 這上一個公鑰，複製下來 輸入在網站的上的公鑰那兒，，搞定（這兒他會檢查一下，剛開始會報錯，數標移開在次檢測吧）

 

而後把線上的代碼克隆下來。注意sshs地址，不是http 地址

初使化項目 ：這兒使用的是腳手架，因此不用npm init -y  ，咱們得用vue自帶的方法。。

先安裝webpack

注意：webpack 4.X 開始，須要安裝 webpack-cli 依賴 ,因此使用這條命令  npm install webpack webpack-cli -g

 

npm install webpack webpack-cli -g

在安裝腳手架

 

>>  npm install --global vue-cli

初始化項目 ，，，，

vue init webpack baoge

>>vue init webpack xxxxxxx //   新建項目名  xxxx表明文 件名

 

 

最後一步。安裝依賴

npm install

 

 

 

 

 

———————————————————————————————————————————————————————————————

而後會回答一些建立相關的問題：

project name   項目名

project descriptoion  //描述

author  做者

vue build  何時編釋  默認吧或1吧

insttll vue-youter   是否安裝路由

use Eslint to lint you code                     是否工整度檢測      

pick an eslint preset      Standard     則試模式

set up unit test    y   單元測試   能夠選n

  setup ese tests with nightwatch   ese方式檢測   這兒都選 n

 

 

初使化完成。。。。。。。。。。。。。。。。。。。。。。。。。

進入安裝目錄，能夠啓動vue測試環境了   進入安裝的目錄   npm run dev

 

  最後一步。。。。。代碼  推送和同步》》》》》》》》》》》》》》》》》》》》》》》》》。

如今本地生成了好多文 件，怎麼推送上去呢？

選 退出運行環境

 

git  status  檢查差別文 件

git add . // 先放放緩漫衝區

git commit -m "這是第一次"

git  push   推送最後一步

——————————————————————————————————————————————

 

如今打開代碼倉庫，能夠看到如今也經本地和線上徹底同樣了哦、、

 

 

生成項目文件說j明

build     編一配置

config    線下下配置

node_modles     包管理

src       源語言件

static          靜態

.babeire            語法轉換配置

.editorconfig    編輯器配置

.eslintgnore    語法檢測目錄

.eslintrc.js      語法檢測

.gitignore     提交時忽略

.postcssrc.js    請求poss 文 件

index.html    入口文件

LICENSE    開源協許義

package-lock.json   安裝的配置鎖定版本

package.json     安裝的配置

README       說明文 件

 

src->main  主根路由

src -app-組件    app分爲三部份，樣式，腳本，模板    主要是組件部份

router 路由  路由分發配置。

 

 

 

運行  npm run  dev  啓動項目 

->     npm run dev

 

 

 

計算機會輸出如下內容：

xsy@1.0.0 dev D:\workback\Sxsy

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 

10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:8080

 

初始化項目有點要解決，第一一像素邊框  初始化css   事件延時  須要在主main.js 導入三個包

.reset.css

.border.css

npm  install  fastclick --save  、、//全局安裝，，這包解決緩時響應。。

在主包導入。。。

 

import fastClick from 'fastclick'

 

在main.js  主包增長   fastClick.attach(document.body)

準備圖標庫  

在www.iconfont.cn   網站申請一賬號

 

在網站新建一個項目

最後一步誰備圖標庫。這樣的話初使化項目就搞好了

 初使化完後   git  add.

                     git commit -m "project init"

                     git push

                      完成推送代碼到倉庫

安裝編寫css用的組件   strlus  類擬   less  的組件

 

 

npm   install stylus  --save

npm install stylus-loader --save

 

npm run start  運行項目

 

項目規劃：在src  源目錄下新建一個pages 放全部頁面組件的文 件

在裏面新建home   list    等等具體頁面   而後在每一個文件組件下面新建：

 

xxx.vue     這兒將因此小組件合成一個大組件

components     這個文 件夾    存放小組件 

在components  下新建不少vue後綴的組件

其實寫組件就是寫components 裏面組件的內容;

 

 

爲了能使用stylus   須要在<styke lang = "stylus" scoped>   

爲了這兒的Css 不影響其它文件，請加上scoped關健字

 

stylus  語法：

 .geadder

　　height :.86rem       //  ires = html  font-size = 50px

 

rem  自適應像素是根據屏 幕算算出爲的。。。

 

 

總結一下：

 

第一次訪問main..js   這個js  訪問到了一個組件，只須要新一個組件文件，因爲一個網頁有多個部分，還能在一個部份顯示一個路由的內容 ，因此main.js  文 件中還申明瞭路由，

在main.js  文件中，用到的app.vue  中：

                                                 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>

這一塊內容中用到了一個內容一個路由的內容，屬於二個不一樣區的內容，路由的內容須要從新定義。在router 文 件中定義路由管理：

而後就是在新建一個管理所有頁面的文 件夾，，裏面把全部頁面全放在這兒，，每一個頁面一個文 件，  而後就是一個頁面有不少組件，，因此在每一個頁面的文 件來在建一個組件文件，

 

 

在 使用引用路徑時@  表明 src  目 錄。。自定義目錄只須要在bulid-.>  webpack.base.conf.js   中

 

 

在css 中引用css 須要加波浪號：

@import ‘~styles/varibles.styl’

 

 

stylus   支持css變量，因此咱們建了一個名爲varibles.styl  文 件存放變量：

　　　　　　　　　　

$bgColor = #00bcd4$darkTextColor = #333$headerHeight = .86rem修改過配置文 件須要重啓服力器：