vue.js開發環境部署

Vue.js 安裝

NPM 方法安裝vue.js項目

npm 版本需要大於 3.0，如果低於此版本需要升級它：

# 查看版本
$ npm -v
2.3.0

#升級 npm
npm install npm -g

 

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝：

# 最新穩定版
$ npm install vue

 

---

命令行工具

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。

# 全局安裝 vue-cli  安裝一次之后以后就不需要安裝
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <[e-mail]>
? Vue build standalone
? Use ESLint to lint your code? Yes   //是否需要 js 語法檢測
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? n  //是否安裝 單元測試工具 目前我們不需要 所以 n 回車
? Setup e2e tests with Nightwatch? n   //是否需要 端到端測試工具 目前我們不需要 所以 n 回車

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

 安裝依賴包

npm install

執行npm i 是一樣的，i 是install的簡寫

 

啟動

npm run dev

 

成功執行以上命令后訪問 http://localhost:8080/，輸出結果如下所示：

 

 

 重點：默認是8080端口，多個項目的話可能會與其他的沖突，修改端口號打開項目目錄下 config/index.js 修改

  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // Various Dev Server settings
    host: '192.168.1.220', // can be overwritten by process.env.HOST
    port: 8080,     // 修改端口號 
    autoOpenBrowser: true,    // true為啟動項目時自動打開瀏覽器
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
}

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    // 項目打包npm run build后預覽顯示空白，這里加個"."即可
    productionSourceMap: false, 　// npm run build 打包后，js文件會出現.map文件，文件很大很占空間，這里設置為false打包即不會出現.map文件

}

 

Vue.js 目錄結構

我們在 IDE（Eclipse、Atom等） 中打開該目錄，結構如下所示：

目錄解析

目錄/文件	說明
build	最終發布的代碼存放位置。
config	配置目錄，包括端口號等。我們初學可以使用默認的。
node_modules	npm 加載的項目依賴模塊
src	這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件： assets: 放置一些圖片，如logo等。 components: 目錄里面放了一個組件文件，可以不用。 App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。 main.js: 項目的核心文件。
static	靜態資源目錄，如圖片、字體等。
test	初始測試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。
index.html	首頁入口文件，你可以添加一些 meta 信息或同統計代碼啥的。
package.json	項目配置文件。
README.md	項目的說明文檔，markdown 格式

在前面我們打開 APP.vue 文件，代碼如下（解釋在注釋中）：

src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 導入組件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 樣式代碼 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

接下來我們可以嘗試修改下初始化的項目，將 Hello.vue 修改為以下代碼：

src/commponents/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '歡迎來到德萊聯盟！'
    }
  }
}
</script>

 

重新打開頁面 http://localhost:8080/，一般修改后會自動刷新，顯示效果如下所示:

 

如何升級vue的版本

1. 在項目目錄里運行 npm upgrade vue  vue-template-compiler，不出意外的話，可以正常運行和 build。

如果有任何問題，刪除 node_modules 文件夾然后重新運行 npm install 即可。

2. 或者運行 npm update vue --save