Vue安裝與使用

開發(fā)環(huán)境搭建

node.js環(huán)境

官方下載地址下載對應版本的安裝包爸邢。

安裝淘寶npm鏡像

npmnode.js使用的包依賴管理器,由于天朝的某些限制,依賴下載比較慢肘习,可以選擇使用淘寶npm鏡像凶伙。

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue命令行工具vue-cli介紹

安裝
npm install -g vue-cli
創(chuàng)建一個新的vue項目腳手架
vue init <template-name> <project-name>

例如:

vue init webpack my-project

新建vue項目

搭建并運行

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

項目目錄結(jié)構(gòu)介紹

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要項目配置
│   └── ...
├── src/
│   ├── main.js                 # app 入口文件
│   ├── App.vue                 # 主要 app 組件
│   ├── components/             # ui 公共組件
│   │   └── ...
│   └── views/                  # 視圖頁面(自己添加的)
│   │   ├── ...                 # 視圖文件夾
│   │   |   ├── js/
│   │   |   ├── css/
│   │   |   └── *.vue
│   │   ├── js/                 # 主要視圖js
│   │   ├── css/                # 主要視圖css
│   │   └── Main.vue            # 主要視圖
│   └── assets/                 # 靜態(tài)資源文件蹋宦,包括字體、圖片等 (processed by webpack)
│       └── ...
├── static/                     # 純粹的靜態(tài)資源文件 (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html 模板脖含,編譯打包的結(jié)果會注入到這里
├── package.json                # 構(gòu)建腳本和依賴
└── README.md                   # Default README file

構(gòu)建命令介紹

  • npm run dev :啟動一個本地node.js服務器豁翎,編譯并運行該單頁面應用角骤。

  • npm run build: 構(gòu)建該單頁面應用,構(gòu)建結(jié)果保存在./dist目錄下

  • npm run unit: 運行單元測試

  • npm run e2e: 運行端到端測試

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末心剥,一起剝皮案震驚了整個濱河市邦尊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌优烧,老刑警劉巖蝉揍,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異畦娄,居然都是意外死亡又沾,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門熙卡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杖刷,“玉大人,你說我怎么就攤上這事再膳⊥ξ穑” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵喂柒,是天一觀的道長不瓶。 經(jīng)常有香客問我,道長灾杰,這世上最難降的妖魔是什么蚊丐? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮艳吠,結(jié)果婚禮上麦备,老公的妹妹穿的比我還像新娘。我一直安慰自己昭娩,他們只是感情好凛篙,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著栏渺,像睡著了一般呛梆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上磕诊,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天填物,我揣著相機與錄音纹腌,去河邊找鬼。 笑死滞磺,一個胖子當著我的面吹牛升薯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播击困,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼涎劈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了沛励?” 一聲冷哼從身側(cè)響起责语,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎目派,沒想到半個月后坤候,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡企蹭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年白筹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谅摄。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡徒河,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出送漠,到底是詐尸還是另有隱情顽照,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布闽寡,位于F島的核電站代兵,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏爷狈。R本人自食惡果不足惜植影,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涎永。 院中可真熱鬧思币,春花似錦、人聲如沸羡微。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妈倔。三九已至博投,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間启涯,已是汗流浹背贬堵。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留结洼,地道東北人黎做。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像松忍,于是被迫代替她去往敵國和親蒸殿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容