新手學習VUE——環境搭建及建立項目

第一種方式：

1.     下載安裝node.js

    檢查是否成功：node-v或npm-v

2..搭建項目：

    第一種方法：用iview腳手架建項目

        打開iview官網==>生態 ===>iview cli==>進行下載iview腳手架，

    下載後進行建立項目

    第二種方法：命令行進行建立

        （1）.npm install -gvue-cli                       //全局安裝vue-cli

        （2）.npm install -g webpack                          //全局安裝webpack

        （3）.(npm)npm install -gwebpack-dev-server             //安裝webpack的本地webserver

        （4）.npm install --save iview                     //下載iveiw組件庫

        （5）.npm install axios    npminstall --save vue-axios  //下載axios

        （6）.cnpm install element-ui --save

        （7）.vue initwebpack  項目名      //搭建項目（你想把項目發到那，就切換到那塊下載）

         

3.切換到你所在的項目，運行項目npm run dev

4.編輯項目時，我建議用HBuilder

5.下載好後，項目以下圖所示：

 

6.比較關心的的幾個文件：

    src下的assets:存放靜態文件

    src下的components:寫頁面

    src下的router下的index.js:配置路由

    src下的main.js:前端的主入口，主要是寫配置。

    對於新引進來的東西，須要在index.js和main.js下引用才方可以使用。

若是以爲npm速度不快，可下載cnpm

(npm install -g cnpm-registry=http://registry.npm.taobao.org)

 

第二種方式：

1.檢測是否安裝好nodejs和npm
檢測命令

    node -v

    npm -v

若是沒有安裝須要先安裝

nodejs的下載路徑：https://nodejs.org/en/download/

在Windows上安裝時務必選擇所有組件，包括勾選Add toPath。

安裝完成後，在Windows環境下，請打開命令提示符，

idea cmd窗口

而後輸入node -v，若是安裝正常，你應該看到  版本號輸出：

檢查nodejs是否安裝成功

npm是Node.js的包管理工具（package manager），Nodejs的安裝程序默認安裝npm，在命令提示符或者終端輸入npm -v，能夠看到相似如下的輸出：

檢查npm

在cmd中直接使用npm來安裝的一些工具的話會比較慢，因此咱們使用淘寶的npm鏡像： 

輸入npm i -g cnpm --registry=https://registry.npm.taobao.org，便可安裝npm鏡像，之後再用到npm的地方直接用cnpm來代替就行了，若是權限不夠，請使用管理員運行命令提示符

安裝淘寶npm鏡像

2.安裝vue-cli，vue腳手架
使用以下命令

    cnpm i -g vue-cli

安裝vue-cli

    測試是否安裝成功：vue -V

檢查vue是否安裝成功

3.項目安裝和建立
（1）.安裝項目
首先進入工做目錄（若是不在工做目錄），使用cd 命令

進入工做目錄

使用腳手架安裝項目：

vue init webpack first_vue 

控制檯顯示：

提示目錄已存在，是否繼續：Y

Project name（工程名）:回車

Project description（工程介紹）：回車

Author：做者名

Vue build（是否安裝編譯器）:回車

Install vue-router（是否安裝Vue路由）：回車

Use ESLint to lint your code（是否使用ESLint檢查代碼，咱們使用idea便可）：n

Set up unit tests（安裝測試工具）：n

Setup e2e tests with Nightwatch（測試相關）：n

Should we run `npm install` for you after the project hasbeen created? (recommended)：選擇：No, I will handle thatmyself

（2）.初始化項目
進入項目目錄

    cd firstVue

初始化項目

    cnpm i

項目目錄結構

運行項目

    cnpm run dev

瀏覽器打開：localhost:8080，便可打開vue項目

Ctrl+C退出運行

4. 配置idea
File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version爲ECMAScript 6，確認

File - Settings - Plugins：搜索vue，安裝Vue.js

Run - Edit Configurations...：點擊加號，選擇npm，Name爲Run，package.json選擇你工程中的package.json，Command爲run，Scripts爲dev,而後就能夠直接在idea中運行了

繼續點擊加號，選擇npm，Name爲Build，package.json選擇你工程中的package.json，Command爲run，Scripts爲build,而後就能夠直接在idea中打包了。

5.安裝使用stylus（是一種健壯的css）cnpm install --save-dev stylus stylus-loader