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熟練一下吧 https://www.cnblogs.com/ttzzyy/p/10383200.html

參考 https://blog.csdn.net/wulala_hei/article/details/85000530