摘要:它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。安裝和使用在之后的實踐過程中講解。有一套良好的代碼規范,對于項目的開發和維護都很友好。
努力了,不一定能成功,但是不努力,感覺好舒服啊
——努訓
沒有了解過vue1.*,直接上手vue2.0;雖然有些吃力但還是很愉快了學下來了。
一丶環境配置node.js
使用6.2.2版本來開發
我使用了nvm來管理我的node,nvm可以很方便的切換要使用的node版本
npm 使用3.9.5版本
npm配置了淘寶鏡像
</>復制代碼
npm config set registry https://registry.npm.taobao.org
sublime-text 3
這款編輯器非常好用,雖然沒有webstorm那么全面,但是裝多點插件也差不多啊
裝了以下好用的插件:
Vue Syntax Highlight 這個必須的好嘛,沒有這個.vue文件都不高亮
Theme - Coffee 比較喜歡的一款配色
ColorPicker 裝了這款插件之后就可以愉快的編輯顏色了
Emmet 可以自動拓展html和css代碼的插件
SublimeCodeIntel 代碼提示了不全插件 支持很多語言
Alignment 代碼對齊插件 之前用2的時候安裝了 現在3上面還沒有安裝
SublimeEnhancements 這個插件給側邊欄增加了很多的拓展功能,比如新建文件或文件夾,用瀏覽器打開文件等
webpack 安裝版本 webpack@1.14.0
webpack是一款前端資源模塊化管理和打包工具,它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔,等到實際需要的時候再異步加載。通過 loader 的轉換,任何形式的資源都可以視作模塊,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
學習鏈接:http://blog.csdn.net/keliyxyz...
確認安裝webpack成功并查看安裝的webpack版本
</>復制代碼
webpack
直接在命令行輸入webpack?,對的。如果安裝成功,就能看到一下的信息,第一行的1.14.0就是我安裝的版本號o(∩_∩)o
</>復制代碼
webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html
Options:
--help, -h, -?
--config
--context
--entry
--module-bind
--module-bind-post
--module-bind-pre
--output-path
--output-file
--output-chunk-file
vue-cli 我安裝的版本2.5.1
vue-cli是一個用于生成vue項目的腳手架工具,不推薦新手直接用vue-cli,尤其是對 Node.js 構建工具不夠了解的同學。還好自己會點node,于是很不害臊的用了
</>復制代碼
npm install -g vue-cli
同樣在命令行輸入 vue -V 檢測是否安裝成功并查看安裝的版本,注意是大寫的V
如果成功返回:
</>復制代碼
C:Users59227Desktop>vue -V
2.5.1
vuex 我安裝的版本為2.1.1
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension,提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
可以理解為組件通信的集中管理。
安裝和使用在之后的實踐過程中講解。
vue-router
用于SPA實現單頁路由,類似angular的angular-ui-router。
安裝和使用在之后的實踐過程中講解。
搭建項目之前,去看了別人的文章,試著擼了一遍代碼,也就是個重復造輪子的過程,感覺沒有意思,所以才萌生出寫個自己的項目的想法,正好答應幫別人做一個npp聊天插件的前端,就拿來練手了。
直接開始:
前面提到了vue-cli腳手架工具,使用起來很簡單,在你想創建項目的目錄下輸入cmd:
</>復制代碼
vue init webpack x-chat //x-chat就是項目的名字
在輸入之后會出現許多配置項,一路enter就可以了。但是其中的ESLint推薦不使用(運行的時候會檢查代碼規范,規范什么的太麻煩,畢竟是小demo),ESlint是可以配置規范的,在多人協作開發的過程中,代碼的規范非常的重要。有一套良好的代碼規范,對于項目的開發和維護都很友好。我這里不用,是因為配置麻煩,以及運行的時候總報錯很影響心情。。
下面對每個配置項做個注釋:
</>復制代碼
? Project name x-chat //項目名默認就是x-caht
? Project description A Vue.js project // 文檔描述,會在README.md文件上生成輸入的內容,默認 A Vue.js project
? Author _**** <****@**.com> // 作者,如果有git,就是讀取git的User信息
? Vue build standalone // 有兩個選項,第一個選項寫著recommended for most users果斷選了(至于干什么用到并不知道)
? Use ESLint to lint your code? Yes// 是否使用ESlint 默認是
? Pick an ESLint preset Standard // 選這個一個ESlint類型
? Setup unit tests with Karma + Mocha? Yes //使用單元測試工具karma和mocha 默認是
? Setup e2e tests with Nightwatch? Yes // 使用e2e測試框架 NightWatch 默認是
打開我們的項目,可以看到如下的目錄結構:
build:webpack打包配置文件夾
config: 同樣是打包配置的文件夾,只是職能不同
src:源碼存放文件夾
static: 靜態文件存放位置
test:測試代碼存放位置,展開可以看到單元測試和e2e測試兩個目錄
.babelrc : babel的配置文件,有關babel可參見:http://www.ruanyifeng.com/blo...
index.html: 單頁應用的html文件,可以看成是一個窗口(window)
package.json: npm的配置文件,配置項目信息,需要安裝的模塊之類
README.md: 項目說明文檔
目錄分析完了,怎么啟動這個項目呢?
在啟動之前還需要安裝我們的依賴模塊,也就是package.json里面的模塊,在根目錄下cmd:
</>復制代碼
npm install
這個過程有點久,建議將npm配置為國內鏡像,比如我之前說得淘寶鏡像
安裝完了之后我們的項目目錄會多出一個node_modules目錄,里面會有很多很多文件夾,賊大。
安裝完之后就運行我們項目了,在根目錄下cmd:
</>復制代碼
npm run dev
這個命令可以在package.json中找到:
</>復制代碼
{
"name": "x-chat",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "ex_fulin ",
"private": true,
"scripts": {
"dev": "node build/dev-server.js", //就是這里
"build": "node build/build.js",
"unit": "karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"vue": "^2.1.0"
},
.....
然后瀏覽器中輸入localhost:8080(其實會自動彈出),就可以看到如下頁面
大功告成!!這一章就到這里了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86693.html
摘要:借我殺死庸碌的情懷,借我縱容的悲愴與哭喊謝知非上一節已經把架子搭好了,接下來就要開始真正的使用進行開發了。一啟動原理打開我們的目錄,能看到這樣的結構很簡單有木有,存放資源。一個字符串模板作為實例的標識使用。模板將會替換掛載的元素。 借我殺死庸碌的情懷,借我縱容的悲愴與哭喊 - 謝知非 上一節已經把架子搭好了,接下來就要開始真正的使用vue2.0進行開...
摘要:然而這次的文章,就像賀師俊所說的這篇文章是從程序員這個老年度總結前端掘金年對我來說,是重要的一年。博客導讀總結個人感悟掘金此文著筆之時,已經在眼前了。今天,我就來整理一篇,我個人認為的年對開發有年終總結掘金又到 2016 Top 10 Android Library - 掘金 過去的 2016 年,開源社區異常活躍,很多個人與公司爭相開源自己的項目,讓人眼花繚亂,然而有些項目只是曇花一...
摘要:異步最佳實踐避免回調地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術和異步函數。 Nodejs 連接各種數據庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
摘要:前端日報精選專題之跟著學節流冴羽的博客全家桶仿微信項目,支持多人在線聊天和機器人聊天騰訊前端團隊社區編碼的奧秘模塊實現入門淺析知乎專欄前端每周清單發布新版本提升應用性能的方法中文寇可往吾亦可往用實現對決支付寶的微信企業付款到零 2017-06-20 前端日報 精選 JavaScript專題之跟著 underscore 學節流 - 冴羽的JavaScript博客 - SegmentFau...
閱讀 1326·2021-10-27 14:14
閱讀 3579·2021-09-29 09:34
閱讀 2482·2019-08-30 15:44
閱讀 1730·2019-08-29 17:13
閱讀 2576·2019-08-29 13:07
閱讀 876·2019-08-26 18:26
閱讀 3349·2019-08-26 13:44
閱讀 3214·2019-08-26 13:37