首頁  >  文章  >  web前端  >  怎麼創建vue.js項目

怎麼創建vue.js項目

青灯夜游
青灯夜游原創
2020-12-25 10:56:0213385瀏覽

方法:先安裝node和cnpm;然後用「npm install --global vue-cli」指令安裝vue-cli;接著以「vue init webpack 專案名」指令建立專案;最後進入專案目錄,用“cnpm i”指令安裝依賴。

怎麼創建vue.js項目

相關推薦:《vue.js教學

本教學操作環境:windows7系統、vue2.9版本,Dell G3電腦。

一、安裝node環境

#  1、下載網址為:https://nodejs.org/en /

  2、檢查是否安裝成功:如果輸出版本號,說明我們安裝node環境成功

  

#  3、為了提高我們的效率,可以使用淘寶的鏡像:http://npm.taobao.org/

  輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org ,即可安裝npm鏡像,以後再用到npm的地方直接用cnpm來代替就好了。

  

  檢查是否安裝成功:

  

#二、建置vue專案環境

  1、全域安裝vue-cli

  <span class="line">npm install --global vue-cli</span>

# #  

  2、進入你的專案目錄,建立一個基於webpack 範本的新專案: vue init webpack 專案名

    

  說明:

    Vue build ==>##    Vue buil 打包方式,回車即可;

##gt; ##    Install vue-router ==> 是否要安裝vue-router,專案中肯定要使用到所以Y 回車;

    Use ESLint to lint your code ==>檢測目前是否需要語法我們不需要所以n 回車;

    Set up unit tests ==> 是否安裝單元測試工具目前我們不需要所以n 回車;

    Setup2e tests with Nightn====sd ; 是否需要端對端測試工具目前我們不需要所以n 回車;

  3、進入專案:cd vue-demo,安裝相依性

  

#安裝成功後,專案資料夾中會多出一個目錄: node_modules

  

 

  4、npm run dev,啟動專案

##  專案啟動成功:

  

三、vue專案目錄解說

  <br>

  1、build:建立腳本目錄

    1)build.js   ==>  生產環境建構腳本;

<br>##    2)check-versions.js 

   〠2)check-versions.js 

   〠2)check-versions.js     〠2)ch ==, node.js版本;

    3)utils.js   ==>  構建相關工具方法;

    4)vue-loader.conf .js   ==>  設定了css載入器以及編譯css之後自動加入前綴;

##    5)webpack.base.conf.js   ==>  webpack基本設定;

    6)webpack.dev.conf.js   ==>  webpack開發環境配置;

    7)webpack.prod.#    7)web=conf.

#pack =>  webpack生產環境配置;

  2、config:專案配置######

    1)dev.env.js   ==>  發展環境變數;

    2)index. )prod.env.js   ==>  生產環境變數;

  3、node_modules:npm 載入的專案依賴模組

  4、src:這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡麵包含了幾個目錄及文件:

    1)assets:資源目錄,放置一些圖片或是公共js、公共css。這裡的資源會被webpack建構;

    2)components:元件目錄,我們寫的元件就放在這個目錄裡面;

    3)router:前端路由,我們需要設定的路由路徑寫在index.js裡面;

    4)App.vue:根元件;

    5)main.js:入口js檔;

##  5、static:靜態)main.js:入口js檔案;

##  5、static:靜態:靜態資源目錄,如圖片、字體等。不會被webpack建構

  6、index.html:首頁入口文件,可以添加一些meta 資訊等

  7、package.json:npm套件設定文件,定義了專案的npm腳本,依賴套件等資訊

<br>  8、README.md:專案的說明文檔,markdown 格式

  9、.xxxx檔案:這些是一些設定檔,包括語法配置,git配置等

更多程式相關知識,請造訪:

程式入門

! !

以上是怎麼創建vue.js項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn