新手學習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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM