vue企業項目搭建過程(vue-cli腳手架超詳細教程 傻瓜-入門)

vue做爲如今主流的前端框架，有必要學習一下。
vue的官方文檔仍是不錯的，開源中文，一個爽字形容。
若是不是實際開發須要vue-cli構建項目，那麼能夠在加一個爽。
然而要構建的時候發現官方文檔仍是不夠用，像下面介紹的全家桶看着就頭皮發麻。

那麼學習vue須要什麼呢：

• vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
  • vue-cli 這個構建工具大大下降了 webpack 的使用難度，大大下降了咱們的學習成本，加快了咱們的開發速度。
  • vue-router
  • vue-resource
  • vuex
• Node
• es6

在使用vue-cli以前，請確認你的電腦已經安裝了 node建議版本在 8.0.0 以上,

1: Node版本管理器--nvm(Windows)

介紹及下載安裝

nvm for windows 是使用go語言編寫的軟件，能夠運行在多種操做系統上。
nvm-windows 最新下載地址：https://github.com/coreybutler/nvm-windows/releases

咱們下載目前穩定版本1.1.6就能夠了。1.1.7版本是最新版本，可能還不是很穩定。
請注意： 在安裝nvm for windows以前，你須要卸載任何現有版本的node.js。而且須要刪除現有的nodejs安裝目錄（例如："C:\Program Files\nodejs’）。由於，nvm生成的symlink（符號連接/超連接)不會覆蓋現有的（甚至是空的）安裝目錄。
你還須要刪除現有的npm安裝位置（例如「C:\Users\weiqinl\AppData\Roaming\npm」），以便正確使用nvm安裝位置。

注意在選擇完nvm安裝路徑後須要制定Node.js的Symlink，即須要設置nodejs的快捷方式存放的目錄(其餘都是下一步操做)

配置阿里鏡像和環境變量,提高下載速度。

根目錄有一個settings.txt的文本文件，打開這個文件，修改配置內容，配置淘寶鏡像。

root: F:\vue\nvm\nvm                                    
path: F:\vue\node                                   
arch: 64                                                
proxy: none                                             
node_mirror: http://npm.taobao.org/mirrors/node/       
npm_mirror: https://npm.taobao.org/mirrors/npm/       

檢測

檢查是否安裝成功，咱們能夠在新的命令窗口中輸入: nvm

• 若是出現nvm版本號和一系列幫助指令，則說明nvm安裝成功。
• 不然，可能會提示nvm: command not found

nvm for windows是一個命令行工具，在控制檯輸入nvm,就能夠看到它的命令用法。基本命令有：

nvm arch [32|64] ： 顯示node是運行在32位仍是64位模式。指定32或64來覆蓋默認體系結構。
nvm install <version> [arch]： 該能夠是node.js版本或最新穩定版本latest。（可選[arch]）指定安裝32位或64位版本（默認爲系統arch）。設置[arch]爲all以安裝32和64位版本。在命令後面添加--insecure ，能夠繞過遠端下載服務器的SSL驗證。
nvm list [available]： 列出已經安裝的node.js版本。可選的available，顯示可下載版本的部分列表。這個命令能夠簡寫爲nvm ls [available]。
nvm on： 啓用node.js版本管理。
nvm off： 禁用node.js版本管理(不卸載任何東西)
nvm proxy [url]： 設置用於下載的代理。留[url]空白，以查看當前的代理。設置[url]爲none刪除代理。
nvm node_mirror [url]：設置node鏡像，默認爲https://nodejs.org/dist/.。我建議設置爲淘寶的鏡像https://npm.taobao.org/mirrors/node/
nvm npm_mirror [url]：設置npm鏡像，默認爲https://github.com/npm/npm/archive/。我建議設置爲淘寶的鏡像https://npm.taobao.org/mirrors/npm/
nvm uninstall <version>： 卸載指定版本的nodejs。
nvm use [version] [arch]： 切換到使用指定的nodejs版本。能夠指定32/64位[arch]。nvm use <arch>將繼續使用所選版本，但根據提供的值切換到32/64位模式的<arch>
nvm root [path]： 設置 nvm 存儲node.js不一樣版本的目錄 ,若是未設置，將使用當前目錄。
nvm version： 顯示當前運行的nvm版本，能夠簡寫爲nvm v

nvm經常使用命令

nvm install ## 安裝指定版本，可模糊安裝，如：安裝v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2

nvm uninstall ## 刪除已安裝的指定版本，語法與install相似

nvm use ## 切換使用指定的版本node

nvm ls ## 列出全部安裝的版本

nvm ls-remote ## 列出因此遠程服務器的版本（官方node version list）

nvm current ## 顯示當前的版本

nvm alias ## 給不一樣的版本號添加別名

nvm unalias ## 刪除已定義的別名

nvm reinstall-packages ## 在當前版本node環境下，從新全局安裝指定版本號的npm包

一個nodejs的安裝使用流程：

推薦 8.9.3 版本

• 打開一個cmd窗口輸入命令：nvm v ，那麼咱們會看到當前nvm的版本信息。咱們就能夠安裝nodejs了。

nvm ls   // 查看目前已經安裝的版本
nvm install 8.9.3  // 安裝指定的版本的nodejs
nvm use 8.9.3  // 使用指定版本的nodejs

• 而後咱們開始配置環境變量了，在環境變量的系統變量中，生成兩個環境變量：NVM_HOME 和 NVM_SYMLINK 
• 咱們開始修改這兩個變量名的變量值：NVM_HOME的變量值爲：F:\vue\nvm\nvm； NVM_SYMLINK的變量值爲：F:\vue\node
• 看一下在Path中有沒有 C:\dev\nvm;或者是C:\dev\nodejs，若是有的話，把他們刪掉，沒有的話更好，咱們本身來配置，在Path的最前面輸入： ;%NVM_HOME%;%NVM_SYMLINK%;

重開cmd命令行工具,輸入以下命令，若是有顯示版本號，則說明安裝成功了。以下圖：

此時 須要配置下 NPM 的一些配置 :

npm config ls 能夠查看配置列表。
npm config set registry=https://registry.npm.taobao.org 配置鏡像站 (注意：此處地址必定要是 https 開頭，若是是 http 開頭，npm 會很慢卡住。)
npm config set prefix "F:\···本身的安裝路徑\nodejs\node_global"  配置全局安裝路徑
npm config set cache "F:\···本身的安裝路徑\nodejs\node_cache"  配置緩存的路徑
npm config ls 配置完成後，再查看一下配置列表，確認是配置成功。

2: vue-cli

全局安裝 webpack(注意要先裝git）

打開命令行工具輸入：

npm install webpack -g

webpack 4.X 開始，須要安裝 webpack-cli 依賴 ,因此使用這條命令:

npm install webpack webpack-cli -g

新建環境變量 NODE_PATH 值爲node_global路徑 F:\vue\node\nodejs\node_global
添加環境變量到PATH中 %NODE_PATH%
完成後輸入

webpack -v

若是出現相應的版本號，則說明安裝成功。

全局安裝 vue-cli

在命令行中輸入:

npm install -g vue-cli

安裝完成後，檢驗是否安裝成功，輸入 vue -V (注意：這裏是大寫的 「V」)，若是出現版本號，則說明安裝成功。

打開文件node_global發現又多了東西

3: 用 vue-cli 來構建項目

首先，在D盤新建一個文件夾做爲項目的存放地，而後cd到目錄下，

輸入命令，建立項目

vue init webpack vue-demo

等待模板下載成功後，會有一個交互式的選項讓你選擇：

? Project name vue-demo # 項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫 ，能夠參考一下。
? Project description A Vue.js project # 項目描述,隨便寫
? Author # 做者名稱
? Vue build standalone # 我選擇的運行加編譯時
Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否須要 vue-router，路由確定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 做爲代碼規範.
? Pick an ESLint preset Standard # 同樣的ESlint 相關
? Set up unit tests Yes # 是否安裝單元測試
? Pick a test runner 按需選擇 # 測試模塊
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試
? Should we run npm install for you after the project has been created? (recommended) npm # 包管理器，我選的NPM

安裝完成後，安裝提示，cd 到項目目錄, 執行命令進行初始化:

npm install

npm install ：安裝全部的模塊，若是是安裝具體的哪一個個模塊，在install 後面輸入模塊的名字便可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件裏面是不容許有任何註釋的），
每一個使用npm管理的項目都有這個文件，是npm操做的入口文件。由於是初始項目，尚未任何模塊，因此我用npm install 安裝全部的模塊。安裝完成後，目錄中會多出來一個node_modules文件夾，這裏放的就是全部依賴的模塊。

啓動項目命令：

npm run dev

成功了

若是瀏覽器打開以後，沒有加載出頁面，有多是本地的 8080 端口被佔用，須要修改一下配置文件 config裏的index.js 的 post

4: vue-cli 的 webpack 配置分析

• dev 就是開發環境的啓動命令
• build 是生產打包環境的命令
• lint 是ESLint的檢查命令 在 --ext 前加一個 --fix 能夠自動修復不符合規範的代碼

5: 打包上線

運行命令:

npm run build

就能夠進行打包工做了，打包完成後，會生成 dist 目錄，項目上線時，把dist 目錄下的文件放到服務器就能夠了。
找個服務器

啓動就能夠訪問了

6: 調試工具 vue-tool

在谷歌商店，搜索這個插件，安裝到瀏覽器，調試項目很好用。

7: 其餘

1.npm 開啓了npm run dev之後怎麼退出或關閉？
    ctrl+c
  2.--save-dev
    自動把模塊和版本號添加到模塊配置文件package.json中的依賴裏devdependencies部分
  3. --save-dev 與 --save 的區別
    --save     安裝包信息將加入到dependencies（生產階段的依賴）
    --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），因此開發階段通常使用它

再來一個demo熟練一下吧 http://www.javashuo.com/article/p-xzgijyhp-hc.html

參考 http://www.javashuo.com/article/p-pcnfowml-cc.html