Vue2.0 新手徹底填坑攻略——從環境搭建到發佈

時間 2019-11-16

標籤 vue2.0 vue 新手徹底攻略環境搭建發佈简体版

原文原文鏈接

本文做者 Jinkey（微信公衆號 jinkey-love，官網 https://jinkey.ai）
原文連接 https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu
文章容許非篡改署名轉載，刪除或修改本段版權信息轉載的，視爲侵犯知識產權，咱們保留追求您法律責任的權利，特此聲明！
感謝 showonne、yubang 技術指導
Demo 地址:
http://demo.jinkey.io/vue2
源碼:
https://github.com/Jinkeycode/vue2-examplejavascript

什麼是 Vue

Vue 是一個前端框架，特色是
數據綁定css

好比你改變一個輸入框 Input 標籤的值，會自動同步更新到頁面上其餘綁定該輸入框的組件的值

html

數據綁定

組件化前端

頁面上小到一個按鈕均可以是一個單獨的文件.vue，這些小組件直接能夠像樂高積木同樣經過互相引用而組裝起來vue

組件化

java

Vue2.0 推薦開發環境

node

開發環境解釋

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.三、webpack 1.13.二、vue-cli 2.4.0、Atom 1.10.2webpack

安裝環境

打開終端運行如下命令git

安裝brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝 nodejs

brew install nodejsgithub

用 npm install npm@3.10.3 更新 npm 版本報錯:

(node:42) fs: re-evaluating native module sources is not supported.

解決辦法:
在官網下載6.70的安裝包再安裝一次(剛剛至關於幫你配置好環境變量，如今再安裝一次升級到最新的 npm)

好像之前官網的安裝包不會自動配置環境變量的，因爲我電腦上以前安裝過 nodejs 因此環境變量已經配置好了，不知道如今的安裝包會不會自動配置環境變量。

Windows 下直接下載安裝包便可

獲取nodejs模塊安裝目錄訪問權限

sudo chmod -R 777 /usr/local/lib/node_modules/

安裝淘寶鏡像

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

安裝webpack

cnpm install webpack -g

安裝vue腳手架

npm install vue-cli -g

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

Mac

cd 目錄路徑

根據模板建立項目

vue init webpack-simple 工程名字<工程名字不能用中文>
或者建立 vue1.0 的項目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

會有一些初始化的設置，以下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(而後會下載 vue2.0模板，這裏可能須要連代理)
Project name (vue-test)直接回車默認
Project description (A Vue.js project) 直接回車默認
Author 寫你本身的名字

cd 命令進入建立的工程目錄

工程目錄如圖所示:

安裝項目依賴

必定要從官方倉庫安裝，npm 服務器在國外因此這一步安裝速度會很慢。

npm install

不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)

cnpm install

安裝 vue 路由模塊`vue-router`和網絡請求模塊`vue-resource`

cnpm install vue-router vue-resource --save

啓動項目

npm run dev

填坑(如下坑可能因爲 vue2.0 致使其餘相關編譯打包工具沒更新致使的)

【重點】後來發現這些坑是因爲 npm 不是最新的版本3.10.2，用 npm 3.9.5就會出現如下坑
解決辦法: 請運行如下命令
npm update -g

報錯

Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'

若是你用的是老版本的 vue-cli 還可能報其餘錯誤，須要更新一下 vue-cli

npm update vue-cli

而後能夠查看一下當前全局 vue-cli 的版本

npm view vue-cli

安裝一下這個依賴到工程開發環境

cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再啓動項目，報錯

ERROR in ./src/main.js
Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
@ multi main
ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080
@ multi main

安裝一下 babel-runtime

cnpm install babel-helpers --save-dev

啓動項目，再次報錯

Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'

找不到依賴那就再安裝一下

cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不寫了，請把所有把舊的環境所有清除，更新到最新版本

解決辦法概述

遇到

Module build failed: Error: Cannot find module '模塊名'

那就安裝

cnpm install 模塊名 --save-dev(關於環境的，表現爲npm run dev 啓動不了)
cnpm install 模塊名 --save(關於項目的，好比main.js，表現爲npm run dev 成功以後控制檯報錯)
好比escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

終於能夠啓動項目了

輸入完命令會自動啓動瀏覽器，若是默認打開 IE 不行

npm run dev

自動啓動瀏覽器就會看到這帥帥的界面了。

開始 Vue 之旅

打開 IDE

推薦 Atom 打開項目，須要安裝 Vue 語法高亮的插件

使用官網文檔學習基礎

咱們來看官網的一個例子，(中文文檔請自行上網搜索)

打開工程目錄下的 App.vue
template 寫 html，script寫 js，style寫樣式

爲了方便敘述，咱們把官網例子寫在同一個組件內
這裏有兩個坑:
第一。一個組件下只能有一個並列的 div，能夠這麼寫，因此複製官網示例的時候只要複製 div 裏面的內容就好。

可是不能這樣寫:

第二。數據要寫在 return 裏面而不是像文檔那樣子寫

錯誤的寫法:

這樣子能夠本身啃完官網文檔組件以前的部分了。

來玩玩組件

前面講得基本上都是各類經常使用組件的數據綁定，下面還得說說的是 Vue 的組件的使用。
在工程目錄/src下建立component文件夾，並在component文件夾下建立一個 firstcomponent.vue並寫仿照 App.vue 的格式和前面學到的知識寫一個組件。

<template> <div id="firstcomponent"> <h1>I am a title.</h1> <a> written by {{ author }} </a> </div> </template> <script type="text/javascript"> export default { data () { return { author: "微信公衆號 jinkey-love" } } } </script> <style> </style>

duang... 不能按官網文檔那樣子叫我作就作，我得先試試再告訴你，我作完效果是這樣子的，但願觀衆作完也是這樣子。(迷之微笑 )

而後在 App.vue 使用組件 ( 由於在 index.html 裏面定義了<div id="app"></div>因此就以這個組件做爲主入口，方便 )
第一步，引入。在<script></script>標籤內的第一行寫

import firstcomponent from './component/firstcomponent.vue'

第二步，註冊。在<script></script>標籤內的 data 代碼塊後面加上 components: { firstcomponent }。記得中間加英文逗號!!!

export default { data () { return { msg: 'Hello Vue!' } }, components: { firstcomponent } }

第三步，使用。
在<template></template>內加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    ![](./assets/logo.png)
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成後的代碼：

這時候看看瀏覽器上的 http://localhost:8080/ 頁面(以前打開過就會自動刷新)，若是你沒看到效果是由於你沒有對 App.vue 和 firstcomponent.vue 進行保存操做，保存後頁面會自動刷新。

使用路由搭建單頁應用

以前已經經過命令安裝了vue-router

cnpm install vue-router --save

在webpack.config.js加入別名

resolve: {
    alias: {vue: 'vue/dist/vue.js'} }

爲何要加 alias 配置項？其做用能夠在文檔中有相應的描述:

修改完以後的webpack.config.js是這樣子的:

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/, loader: 'vue' }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/, loader: 'file', query: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: {vue: 'vue/dist/vue.js'} }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) }

再按以前的方法寫一個組件 secondcomponent.vue

<template> <div id="secondcomponent"> <h1>I am another page</h1> <a> written by {{ author }} </a> <p> 感謝 <a href="https://github.com/showonne">showonne</a>大神的技術指導</p> </div> </template> <script> export default { data() { return { author: "微信公衆號 jinkey-love", articles: [], } } } } </script> <style> </style>

這時候修改 main.js，引入並註冊 vue-router

import VueRouter from "vue-router"; Vue.use(VueRouter);

而且配置路由規則和 app 啓動配置項加上 router，舊版的 router.map 方法在 vue-router 2.0 已經不能用了。修改後的main.js以下:

import Vue from 'vue' import App from './App.vue' import VueRouter from "vue-router"; import VueResource from 'vue-resource' //開啓debug模式 Vue.config.debug = true; Vue.use(VueRouter); Vue.use(VueResource); // 定義組件, 也能夠像教程以前教的方法從別的文件引入 const First = { template: '<div><h2>我是第 1 個子頁面</h2></div>' } import secondcomponent from './component/secondcomponent.vue' // 建立一個路由器實例 // 而且配置路由規則 const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: First }, { path: '/second', component: secondcomponent } ] }) // 如今咱們能夠啓動應用了！ // 路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。 const app = new Vue({ router: router, render: h => h(App) }).$mount('#app')

這樣子改完再打開瀏覽器看看。

點擊那兩個連接試試，會發現<router-view class="view"></router-view>的內容已經展現出來，同時注意瀏覽器地址已經變動。

另外，也能夠把 App.vue 的內容寫在 main.js 也是能夠的不過不建議這麼作

若是你使用 vue1.0和0.7版本的 vue-router，請參照下面這個教程, 他整個系列都不錯的，固然僅限於 vue1.0 :

http://guowenfh.github.io/2016/03/28/vue-webpack-06-router/

給頁面加點動態數據

這時候的頁面都是靜態的(數據在寫程序的時候已經固定了不能修改)，而每一個應用基本上都會請求外部數據以動態改變頁面內容。對應有一個庫叫 vue-resource 幫咱們解決這個問題。
使用命令行安裝

cnpm install vue-resource --save

在 main.js 引入並註冊 vue-resource:

import VueResource from 'vue-resource' Vue.use(VueResource);

咱們在 secondcomponent.vue 上來動態加載數據
添加一個列表:

<ul>
      <li v-for="article in articles">
        {{article.title}}
      </li>
    </ul>

在 data 裏面加入數組 articles 並賦值爲[]
而後在 data 後面加入加入鉤子函數 mounted(詳細請參照官方文檔關於 vue 生命週期的解析)，data 和 mount 中間記得記得加逗號

mounted: function() { this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, { headers: { }, emulateJSON: true }).then(function(response) { // 這裏是處理正確的回調 this.articles = response.data.subjects // this.articles = response.data["subjects"] 也能夠 }, function(response) { // 這裏是處理錯誤的回調 console.log(response) }); }

這裏使用的是豆瓣的公開 GET 接口，若是接口是跨域的 POST 請求，則須要在服務器端配置:

Access-Control-Allow-Origin: *

這時候運行看看。等一會接口返回數據，咦，數據加載出來了，棒棒噠 !

更多 vue-router 的使用方法能夠看

vue-router 0.7
http://m.doc00.com/doc/1001004eg
vue-router 2.0
http://router.vuejs.org/zh-cn/index.html

來拯救如此難看的界面

組件、雙向綁定、路由、數據請求等基本特性都能用了，寫到這裏一個單頁應用基本上成型了。可是，這幾面也太 TM 難看了吧。本身寫 UI 框架太費勁？那就上網找一個吧。
原本想給你們介紹 Vux 的，由於他用的是微信的 WeUI 設計規範，對於開發微信小程序或者微信內的網頁很是和諧，但因爲寫這篇文章的時候 Vux 還不支持 vue2.0，只能用別的框架了。
命令行安裝 ElementUI (此處某公司的人應該發紅包了...)

cnpm install element-ui@next -S

而後在 main.js 引入並註冊

import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element)

保存，這時候程序報錯

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

官網文檔又有坑了，安裝教程也不跟咱們說這一步，當咱們都是高手了...
報錯是因爲咱們引入了index.css這個 CSS 文件，可是 webpack 打包的時候沒法識別並轉換成 js，因此就須要配置才能讀取 css 和字體文件，運行命令安裝下面三個東西(若是以前安裝過就不須要了)

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

在 webpack.config.js 中的 loaders 數組加入如下配置，記得該加逗號的地方加逗號!

{
    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/, loader: "file" }

修改完的 webpack.config.js 以下

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/, loader: 'vue' }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/, loader: "file" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/, loader: 'file', query: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: {vue: 'vue/dist/vue.js'} }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) }

給豆瓣的電影列表套個衣服(樣式) :

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="line-height: 36px; color: #20A0FF">豆瓣電影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
</el-card>

打開瀏覽器,輸入網址:

http://localhost:8080/second

列表比以前漂亮多了，你還能夠參照 ElementUI 的文檔使用更多組件樣式

http://element.eleme.io/#/component/layout

編譯

npm run build

又報錯了...orz

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]

解決辦法(21061019 showonne 提交 PR 已合併到主分支)

cnpm install babel-preset-es2015 --save-dev
cnpm install babel-preset-stage-0 --save-dev

而後在項目目錄下建立一個.babelrc文件，內容以下:

{
    presets: ['es2015', 'stage-0'] }

或者在webpack.config.js中這裏

{
        test: /\\\\.js$/, loader: 'babel', exclude: /node_modules/ }

加入 presets 配置，修改爲下面醬紫:

{
        test: /\\\\.js$/, loader: 'babel', exclude: /node_modules/, query: {presets: ['es2015', 'stage-0'] }

再次執行 npm run build 就能夠了，後來發現直接運行 webpack 命令也是能夠打包的

webpack --color --progress

接着把 index.html 和整個 dist 目錄丟到服務器就能夠了。

若是你以爲這篇文章寫得好，不須要打賞，你能夠下載我朋友作的一個閱讀工具，能夠訂閱公衆號和簡書、也能夠看大神分享的優秀文章。

下載地址：[

Jinkey原創
感謝 showonne、yubang 技術指導
Demo 地址:
http://demo.jinkey.io/vue2
源碼:
https://github.com/Jinkeycode/vue2-example

什麼是 Vue

Vue 是一個前端框架，特色是
數據綁定

好比你改變一個輸入框 Input 標籤的值，會自動同步更新到頁面上其餘綁定該輸入框的組件的值

數據綁定

組件化

頁面上小到一個按鈕均可以是一個單獨的文件.vue，這些小組件直接能夠像樂高積木同樣經過互相引用而組裝起來

組件化

Vue2.0 推薦開發環境

開發環境解釋

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.三、webpack 1.13.二、vue-cli 2.4.0、Atom 1.10.2

安裝環境

打開終端運行如下命令

安裝brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝 nodejs

brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本報錯:

(node:42) fs: re-evaluating native module sources is not supported.

解決辦法:
在官網下載6.70的安裝包再安裝一次(剛剛至關於幫你配置好環境變量，如今再安裝一次升級到最新的 npm)

好像之前官網的安裝包不會自動配置環境變量的，因爲我電腦上以前安裝過 nodejs 因此環境變量已經配置好了，不知道如今的安裝包會不會自動配置環境變量。

Windows 下直接下載安裝包便可

獲取nodejs模塊安裝目錄訪問權限

sudo chmod -R 777 /usr/local/lib/node_modules/

安裝淘寶鏡像

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

安裝webpack

cnpm install webpack -g

安裝vue腳手架

npm install vue-cli -g

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

Mac

cd 目錄路徑

根據模板建立項目

vue init webpack-simple 工程名字<工程名字不能用中文>
或者建立 vue1.0 的項目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

cd 命令進入建立的工程目錄

工程目錄如圖所示:

安裝項目依賴

必定要從官方倉庫安裝，npm 服務器在國外因此這一步安裝速度會很慢。

npm install

不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)

cnpm install

安裝 vue 路由模塊`vue-router`和網絡請求模塊`vue-resource`

cnpm install vue-router vue-resource --save

啓動項目

npm run dev

填坑(如下坑可能因爲 vue2.0 致使其餘相關編譯打包工具沒更新致使的)

【重點】後來發現這些坑是因爲 npm 不是最新的版本3.10.2，用 npm 3.9.5就會出現如下坑
解決辦法: 請運行如下命令
npm update -g

報錯

Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'

若是你用的是老版本的 vue-cli 還可能報其餘錯誤，須要更新一下 vue-cli

npm update vue-cli

而後能夠查看一下當前全局 vue-cli 的版本

npm view vue-cli

安裝一下這個依賴到工程開發環境

cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再啓動項目，報錯

ERROR in ./src/main.js
Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
@ multi main
ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080
@ multi main

安裝一下 babel-runtime

cnpm install babel-helpers --save-dev

啓動項目，再次報錯

Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'

找不到依賴那就再安裝一下

cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不寫了，請把所有把舊的環境所有清除，更新到最新版本

解決辦法概述

遇到

Module build failed: Error: Cannot find module '模塊名'

那就安裝

cnpm install 模塊名 --save-dev(關於環境的，表現爲npm run dev 啓動不了)
cnpm install 模塊名 --save(關於項目的，好比main.js，表現爲npm run dev 成功以後控制檯報錯)
好比escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

終於能夠啓動項目了

輸入完命令會自動啓動瀏覽器，若是默認打開 IE 不行

npm run dev

自動啓動瀏覽器就會看到這帥帥的界面了。

開始 Vue 之旅

打開 IDE

推薦 Atom 打開項目，須要安裝 Vue 語法高亮的插件

使用官網文檔學習基礎

咱們來看官網的一個例子，(中文文檔請自行上網搜索)

打開工程目錄下的 App.vue
template 寫 html，script寫 js，style寫樣式

可是不能這樣寫:

第二。數據要寫在 return 裏面而不是像文檔那樣子寫

錯誤的寫法:

這樣子能夠本身啃完官網文檔組件以前的部分了。

來玩玩組件

<template> <div id="firstcomponent"> <h1>I am a title.</h1> <a> written by {{ author }} </a> </div> </template> <script type="text/javascript"> export default { data () { return { author: "微信公衆號 jinkey-love" } } } </script> <style> </style>

duang... 不能按官網文檔那樣子叫我作就作，我得先試試再告訴你，我作完效果是這樣子的，但願觀衆作完也是這樣子。(迷之微笑 )

import firstcomponent from './component/firstcomponent.vue'

第二步，註冊。在<script></script>標籤內的 data 代碼塊後面加上 components: { firstcomponent }。記得中間加英文逗號!!!

export default { data () { return { msg: 'Hello Vue!' } }, components: { firstcomponent } }

第三步，使用。
在<template></template>內加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    ![](./assets/logo.png)
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成後的代碼：

使用路由搭建單頁應用

以前已經經過命令安裝了vue-router

cnpm install vue-router --save

在webpack.config.js加入別名

resolve: {
    alias: {vue: 'vue/dist/vue.js'} }

爲何要加 alias 配置項？其做用能夠在文檔中有相應的描述:

修改完以後的webpack.config.js是這樣子的:

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/, loader: 'vue' }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/, loader: 'file', query: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: {vue: 'vue/dist/vue.js'} }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) }

再按以前的方法寫一個組件 secondcomponent.vue

<template> <div id="secondcomponent"> <h1>I am another page</h1> <a> written by {{ author }} </a> <p> 感謝 <a href="https://github.com/showonne">showonne</a>大神的技術指導</p> </div> </template> <script> export default { data() { return { author: "微信公衆號 jinkey-love", articles: [], } } } } </script> <style> </style>

這時候修改 main.js，引入並註冊 vue-router

import VueRouter from "vue-router"; Vue.use(VueRouter);

而且配置路由規則和 app 啓動配置項加上 router，舊版的 router.map 方法在 vue-router 2.0 已經不能用了。修改後的main.js以下:

import Vue from 'vue' import App from './App.vue' import VueRouter from "vue-router"; import VueResource from 'vue-resource' //開啓debug模式 Vue.config.debug = true; Vue.use(VueRouter); Vue.use(VueResource); // 定義組件, 也能夠像教程以前教的方法從別的文件引入 const First = { template: '<div><h2>我是第 1 個子頁面</h2></div>' } import secondcomponent from './component/secondcomponent.vue' // 建立一個路由器實例 // 而且配置路由規則 const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: First }, { path: '/second', component: secondcomponent } ] }) // 如今咱們能夠啓動應用了！ // 路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。 const app = new Vue({ router: router, render: h => h(App) }).$mount('#app')

這樣子改完再打開瀏覽器看看。

點擊那兩個連接試試，會發現<router-view class="view"></router-view>的內容已經展現出來，同時注意瀏覽器地址已經變動。

另外，也能夠把 App.vue 的內容寫在 main.js 也是能夠的不過不建議這麼作

若是你使用 vue1.0和0.7版本的 vue-router，請參照下面這個教程, 他整個系列都不錯的，固然僅限於 vue1.0 :

http://guowenfh.github.io/2016/03/28/vue-webpack-06-router/

給頁面加點動態數據

cnpm install vue-resource --save

在 main.js 引入並註冊 vue-resource:

import VueResource from 'vue-resource' Vue.use(VueResource);

咱們在 secondcomponent.vue 上來動態加載數據
添加一個列表:

<ul>
      <li v-for="article in articles">
        {{article.title}}
      </li>
    </ul>

mounted: function() { this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, { headers: { }, emulateJSON: true }).then(function(response) { // 這裏是處理正確的回調 this.articles = response.data.subjects // this.articles = response.data["subjects"] 也能夠 }, function(response) { // 這裏是處理錯誤的回調 console.log(response) }); }

這裏使用的是豆瓣的公開 GET 接口，若是接口是跨域的 POST 請求，則須要在服務器端配置:

Access-Control-Allow-Origin: *

這時候運行看看。等一會接口返回數據，咦，數據加載出來了，棒棒噠 !

更多 vue-router 的使用方法能夠看

vue-router 0.7
http://m.doc00.com/doc/1001004eg
vue-router 2.0
http://router.vuejs.org/zh-cn/index.html

來拯救如此難看的界面

cnpm install element-ui@next -S

而後在 main.js 引入並註冊

import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element)

保存，這時候程序報錯

Uncaught Error: Module parse failed: /Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

在 webpack.config.js 中的 loaders 數組加入如下配置，記得該加逗號的地方加逗號!

{
    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/, loader: "file" }

修改完的 webpack.config.js 以下

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/, loader: 'vue' }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/, loader: "file" }, { test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/, loader: 'file', query: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: {vue: 'vue/dist/vue.js'} }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) }

給豆瓣的電影列表套個衣服(樣式) :

<el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="line-height: 36px; color: #20A0FF">豆瓣電影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
</el-card>

打開瀏覽器,輸入網址:

http://localhost:8080/second

列表比以前漂亮多了，你還能夠參照 ElementUI 的文檔使用更多組件樣式

http://element.eleme.io/#/component/layout

編譯

npm run build

又報錯了...orz

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]

解決辦法(21061019 showonne 提交 PR 已合併到主分支)

cnpm install babel-preset-es2015 --save-dev
cnpm install babel-preset-stage-0 --save-dev

而後在項目目錄下建立一個.babelrc文件，內容以下:

{
    presets: ['es2015', 'stage-0'] }

或者在webpack.config.js中這裏

{
        test: /\\\\.js$/, loader: 'babel', exclude: /node_modules/ }

加入 presets 配置，修改爲下面醬紫:

{
        test: /\\\\.js$/, loader: 'babel', exclude: /node_modules/, query: {presets: ['es2015', 'stage-0'] }

再次執行 npm run build 就能夠了，後來發現直接運行 webpack 命令也是能夠打包的

webpack --color --progress

接着把 index.html 和整個 dist 目錄丟到服務器就能夠了。

若是你以爲這篇文章寫得好，不須要打賞，你能夠下載我朋友作的一個閱讀工具，能夠訂閱公衆號和簡書、也能夠看大神分享的優秀文章。
下載地址：https://itunes.apple.com/us/app/you-duuread-zhi-gei-xiang/id1175225244

做者：JinkeyBlog 連接：http://www.jianshu.com/p/5ba253651c3b 來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Vue2.0 新手徹底填坑攻略——從環境搭建到發佈

什麼是 Vue

Vue2.0 推薦開發環境

安裝環境

安裝brew

安裝 nodejs

獲取nodejs模塊安裝目錄訪問權限

安裝淘寶鏡像

安裝webpack

安裝vue腳手架

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

根據模板建立項目

cd 命令進入建立的工程目錄

安裝項目依賴

安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

啓動項目

填坑(如下坑可能因爲 vue2.0 致使其餘相關編譯打包工具沒更新致使的)

解決辦法概述

終於能夠啓動項目了

開始 Vue 之旅

打開 IDE

使用官網文檔學習基礎

來玩玩組件

使用路由搭建單頁應用

給頁面加點動態數據

來拯救如此難看的界面

編譯

什麼是 Vue

Vue2.0 推薦開發環境

安裝環境

安裝brew

安裝 nodejs

獲取nodejs模塊安裝目錄訪問權限

安裝淘寶鏡像

安裝webpack

安裝vue腳手架

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

根據模板建立項目

cd 命令進入建立的工程目錄

安裝項目依賴

安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

啓動項目

填坑(如下坑可能因爲 vue2.0 致使其餘相關編譯打包工具沒更新致使的)

解決辦法概述

終於能夠啓動項目了

開始 Vue 之旅

打開 IDE

使用官網文檔學習基礎

來玩玩組件

使用路由搭建單頁應用

給頁面加點動態數據

來拯救如此難看的界面

編譯

安裝 vue 路由模塊`vue-router`和網絡請求模塊`vue-resource`

安裝 vue 路由模塊`vue-router`和網絡請求模塊`vue-resource`