vue起手式

時間 2019-12-12

標籤 vue 手式简体版

原文原文鏈接

許久不曾更新文章，雖然不是程序員但仍是忘懷不了擼碼的覺悟.

1.VUE環境搭建

安裝node.js (項目開發前準備) Node.js官網：https://nodejs.org/en/ 進入Node.js官網，選擇下載並安裝Node.js。安裝過程只須要點擊「下一步」便可，很是簡單。 node.js安裝完成後：驗證Node.js是否安裝好，在windows下，win+r召喚出運行窗口，輸入cmd打開命令行窗口。(任意路徑的cmd下)輸入node -v便可獲得對應的Node.js版本。 npm包管理器是集成在Node.js中了，因此在安裝Node.js的時候就已經自帶了npm。

npm -g install npm複製代碼

安裝cnpm (項目開發前準備) 安裝完node以後，npm包含的不少依賴包是部署在國外的。因爲資源的限制，安裝npm依賴包的時候常常失敗，建議使用npm的國內鏡像cnpm 命令行工具代替默認的npm。 npm 國內鏡像 https://npm.taobao.org/ 在(任意路徑的cmd下)命令行中輸入如下內容等待安裝
```
npm install -g cnpm -registry=https://registry.npm.taobao.org複製代碼
```
cnpm全局安裝vue-cli (若用臨時服務可全局安裝 live –server,此步省略) 在(任意路徑的cmd下)命令行中運行如下命令而後等待安裝
```
cnpm install -g vue-cli 複製代碼
```
安裝完後，檢查是否安裝成功，輸入vue，出現如下提示表示安裝成功。
構建項目 (可直接在磁盤上建立文件夾，在編輯器中直接打開項目文件夾) 。新建項目先將vue項目建在f盤的vue-demo文件夾下，再利用命令進入此目錄。在cmd中輸入盤符f:回車便可進入F盤：輸入命令 cd vuedemo跳到此目錄下：

初始化一個項目：
在此目錄下建立一個基於 webpack 模板的新項目,即在cmd中輸入如下命令（若使用live-server則在新建項目後 npm init,初始化成功後根目錄下多一個 package.json 文件）
```
vue init webpack my-vue-project複製代碼
```
意思是初始化一個項目，利用的是webpack打包和壓縮，此項目命名爲my-vue-project。這樣，my-vue-project文件夾就自動生成剛剛在指定的目錄中，在初始化項目的過程當中，須要輸入項目名、描述、做者等。
安裝npm項目依賴 (若用live-server 此步可省略) cmd進入前端vue項目的根目錄（在cmd中，注意須要使用命令先定位到my-vue-project目錄下，定位命令：cmd –> 盤符: -> cd my-vue-project 而後輸入命令cnpm install安裝項目所需的依賴包資源
```
cnpm install 複製代碼
```
執行完成後能夠看到my-vue-project文件夾下多了一個node_modules文件
npm編譯第一次運行前，要對項目進行編譯，cmd進入前端vue項目的根目錄，輸入命令
```
npm run build複製代碼
```
，此時會對根目錄下的package.json對build命令的定義進行編譯，通常"build" = "webpack -p"。
運行項目 cmd進入前端vue項目的根目錄，使用命令
```
npm run dev複製代碼
```
運行項目，此時會用nodejs啓動這個前端的vue項目項目運行成功後瀏覽器能夠用
```
localhost:8080複製代碼
```
打開呈現如下頁面。注意瀏覽器的版本，低版本的不支持哦。

2.VUE調試工具vue-devtools的安裝與使用

在github上下載壓縮包，github下載地址：github.com/vuejs/vue-d…，
解壓到本地的磁盤找到文件vue-devtools/shells/chrome/manifest.json，修改persistent爲true。
進入輸入
```
npm install複製代碼
```
以後等待下載項目依賴包, 而後目錄下就會多出一個node-modules文件夾，裏面就是項目所依賴的包，再進行
```
npm run build複製代碼
```
npm run build這一步必定不要忘了，沒有執行這一步的話，項目文件夾shells>chrome文件夾裏會少一個src文件夾,以下圖
咱們找到谷歌瀏覽器的擴展程序功能，勾選開發者模式，而後咱們將插件文件夾裏的shells>chorme文件夾直接拖到頁面中，完成安裝。（注意：若是咱們沒有執行第4部的
```
npm run build複製代碼
```
，在這裏會報錯：沒法加載背景腳本"build/background.js"）
在插件的目錄下執行
```
npm run dev複製代碼
```
，這個時候咱們的插件就能夠運行了,打開localhost:8080能夠看到插件已經安裝並運行了。
咱們在打開本地的其餘項目時，就不須要在vue-devtools文件夾下執行
```
npm run dev複製代碼
```
了，由於這個插件已經安裝在瀏覽器中。接下來就愉快的調試你的vue項目吧。

以localhost:8080訪問項目時，只需在項目目錄下執行如下代碼

npm run dev win+r > 盤符： > cd 文件夾名稱 > npm run dev複製代碼

3.配置nginx(多個vue項目)

配置nginx：先後端分離項目通常都要解決跨域問題，配好nginx安裝目錄/conf/nginx.conf的server模塊
配置項目主機地址：前端項目裏須要有個config文件夾，裏面要有host.js或者config.js文件，定義nginx轉域後的主機地址+端口號（也就是nginx.conf裏面server模塊的server_name值+listen的端口號）。git項目拉下來沒有的話本身加一個，文件內容範例下面用${}表示nginx.conf裏面server模塊對應的字段值
```
const host = 'http://${server_name}:${listen}/server/';
export {host};複製代碼
```
配置windows的HOSTS：因爲是在本機上啓用前端項目，須要將127.0.0.1和nginx代理後的域名作對應。找到系統的HOSTS文件（win7系統下在C:\Windows\System32\drivers\etc裏面），增長一條「127.0.0.1 ${server_name}」。不然本地啓動前端項目後瀏覽器訪問nginx代理後的域名會發生dns錯誤。

第一次配置好後，之後啓動只用兩步：

啓動nginx 
進入前端項目根目錄，cmd運行npm run dev複製代碼

一個比較典型的用webpack管理的vue項目應該有以下文件和文件夾：

config/：定義代理的域名dist
dist/: 整個前端項目用webpack打包後的目標存放文件夾，裏面通常有bundle.js文件
lib/: 開發時引用的一些依賴文件，最經典的就是jquery
node_modules/：上面介紹的用npm對項目依賴組件進行安裝時就放在這個文件夾裏。
src/：本身寫的源代碼
index.html：主頁入口文件
package.json和webpack.config.js：這兩個文件應該是組件依賴關係和管理打包的配置文件？
不太懂，反正沒有是不能cnpm install、cnpm run build、cnpm run dev的。複製代碼

4.開發環境

運行html

npm run dev複製代碼

webpack配置文件爲：前端

webpack.dev.conf.js複製代碼

瀏覽器自動刷新：
vue

將webpack.dev.conf.js中的 hot設置爲 false複製代碼

相關標籤/搜索

每日一句

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