vue腳手架搭建流程

搭建vue項目以前你須要安裝vue的腳手架和node.js，一塊兒去看看怎麼搭建一個vue環境吧。（學編程語言最愛看見的就是用這個先寫一個helloworld，只想說我對世界友好但是現實是殘酷的。。。。。。）

1& 安裝node.js （安裝網址點擊下面連接）

node.js下載網址

安裝完之後桌面上什麼都沒有是否是有點慌啊！不急，你先打開Dos窗口，輸入如下命令，

若是界面以下：（恭喜你）

 

 

也有可能失敗，失敗的緣由多是系統權限，目前尚未找到最好的解決辦法。。。。。

Node.js是個啥人家首頁都寫着呢，俺就不給你解釋了哈。

 

2&安裝vue的腳手架

全局安裝vue-cil，也就是所謂的腳手架（不要以爲有什麼高大尚的也就是如此而已）

1）用npm安裝（國際開源庫生態系統）

 

 

2）用cnpm安裝（使用國內鏡像安裝）

你先用淘寶鏡像安裝cnpm纔可使用哦

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

 

 

檢查是否安裝上（cnpm -v）

 

 

2. 用cnpm安裝vue腳手架

cnpm install -g vue-cli

最後檢查本身是否安裝上：（vue -V）記住這裏的-V是大寫字母V，出不來可不要懶我，我可不會管你

特別注意：

1.若是提示「沒法識別」，有多是npm的版本太低。

解決辦法：npm install -g npm（更新一下版本就行了）。

2. 若是安裝失敗的話。

解決辦法：npm cache clean（清除一下緩存就行了）

 

3&生成項目

首先須要用cd指令進入項目目錄進行搭建項目的文件夾

 

 

 

 

 

配置完成之後，能夠看到目錄下多出一個項目文件夾，裏面就是vue-cli建立的一個局域webpack的vue.js項目。

而後進入項目目錄下：cd mai

上面腳手架給咱們把經常使用的插件都下載而且配置起來，比方說路由、以及es6轉成es5的插件。

在作項目的過程咱們經常用到數據的傳輸和各個組件的管理，因此接下來咱們還須要安裝一些插件：

 

安裝vue-resource是用於ajax請求的vue插件 用來和服務器端進行數據通訊

npm install vue-resource --save

安裝vuex是用於管理每一個組件之間的狀態值的改變

npm install vuex --save

點擊打開連接（vuex的介紹和使用）

記住以上兩個必須安裝在項目裏哦，忘記了小姐姐可不會負責哦（沒事，錯了就從新來一遍唄）。

而後再執行下面的npm install，把全部包安裝到node_modules文件夾下面，若是不這麼幹，會報錯：「'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序」

npm install（這樣就完成了）

最後就是啓動項目了（就問一句激不激動小夥伴們）

npm run dev

 

 

出現這個頁面就算是大功告成了（在瀏覽器上輸入localhost：8080就能夠打開以下界面）

 

（能夠開始寫項目了。。。。。。）

特別注意：

若是瀏覽頁面打不開或者是沒有加載頁面，有多是本地8080端口被佔用，又或者是你關閉了這個窗口。

解決辦法：

針對第一種狀況：修改配置文件就行了

打開項目找到config>index.js

 

 

建議將端口號改成不經常使用的端口（例如：8075 8081等等端口，通常狀況默認的端口號是8080）。

對於第二種狀況：重啓一下JavaScript的運行環境就行了，至於怎麼啓動我就不說了。

 

4&打包上線

本身的項目文件都須要放到 src 文件夾下

項目開發完成以後，能夠輸入 npm run build 來進行打包工做

打包完成後，會生成 dist 文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看，項目上線時，只須要將 dist 文件夾放到服務器就好了。

導入文件之後，其文件組織結構以下所示：

 

 

各個文件夾的含義以下：

|-- build            // 項目構建(webpack)相關代碼

|   |-- build.js         // 生產環境構建代碼

|   |-- check-version.js      // 檢查node、npm等版本

|   |-- dev-client.js        // 熱重載相關

|   |-- dev-server.js         // 構建本地服務器

|   |-- utils.js             // 構建工具相關

|   |-- webpack.base.conf.js     // webpack基礎配置

|   |-- webpack.dev.conf.js      // webpack開發環境配置

|   |-- webpack.prod.conf.js     // webpack生產環境配置

|-- config           // 項目開發環境配置

|   |-- dev.env.js    // 開發環境變量

|   |-- index.js     // 項目一些配置變量

|   |-- prod.env.js   // 生產環境變量

|   |-- test.env.js   // 測試環境變量

|-- src           // 源碼目錄

|   |-- components    // vue公共組件

|   |-- store        // vuex的狀態管理

|   |-- App.vue       // 頁面入口文件

|   |-- main.js       // 程序入口文件，加載各類公共組件

|-- static            // 靜態文件，好比一些圖片，json數據等

|   |-- data        // 羣聊分析獲得的數據用於數據可視化

|-- .babelrc           // ES6語法編譯配置

|-- .editorconfig      // 定義代碼格式

|-- .gitignore        // git上傳須要忽略的文件格式

|-- README.md       // 項目說明

|-- favicon.ico

|-- index.html      // 入口頁面

|-- package.json    // 項目基本信息