vue學習一:新建或打開vue項目(vue-cli2)


vue-cli3的操作參考文章:vue/cli 3.0腳手架搭建淺談vue-cli 3 和 vue-cli 2的區別

1、前期准備:

  • node.js環境,安裝node
  • npm或者cnpm(npm的淘寶鏡像,在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org。由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所以需要npm的國內鏡像---cnpm)
  • vue-cli 腳手架構建工具,構建項目(在命令行中運行命令 cnpm install -g vue-cli)

-------------------------------------------------------------------------------------------------------------------------------------------------------------

2019/8/14更新:

vue3.x版本使用命令:

npm install -g @vue/cli

yarn global add @vue/cli

 

2、用vue-cli構建項目

進入要創建項目目錄的工作區,比如選擇桌面來存放新建的項目:cd desktop

在命令行中運行命令 vue init webpack firstVue。解釋一下這個命令,這個命令的意思是初始化一個項目,其中webpack是構建工具,也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄中(我的實例中,會在桌面生成該文件夾),運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。

打開firstVue文件夾,項目文件如下所示,這就是腳手架的作用,搭建工作平台。(目錄介紹

(1) Build:項目構建(webpack)相關代碼;

(2) config:配置目錄,包括端口號等。

(3) node_modules:npm加載的項目依賴模塊

(4) src:這個目錄當中的內容包含了我們基本上要做的事情,這里包含了幾個文件:

  assets:存放圖片

  components:存放組件文件

  App.vue:項目入口文件,組件也可以直接寫在這里不適用components

  main.js:核心文件

(5) static:靜態資源目錄

(6) test:初始測試目錄

(7) .xxxx:配置文件,包括git配置和語法配置等

(8) index.html:首頁

(9) package.json:項目配置文件

(10) README.md:說明文檔

 3、安裝依賴資源

 這個項目現在還只是一個結構框架,整個項目需要的依賴資源都還沒有安裝,依賴的資源在package.json文件(package.json文件可以手工編寫,也可以使用npm init命令自動生成)中有列出來。

要安裝依賴包,首先cd到項目文件夾(firstVue文件夾),然后運行命令 cnpm install ,等待安裝。

安裝完成之后,會在我們的項目目錄firstVue文件夾中多出一個node_modules文件夾,這里邊就是我們項目需要的依賴包資源

npm install 可以一條命令同時安裝多個包,包之間用空格分隔。包會被安裝進 node_modules 目錄中。

--save-dev 會把安裝的包和版本號記錄到 package.json 中的 devDependencies 對象中。

 --save, 會記錄到 dependencies 對象中。

它們的區別:

打包工具和測試工具用到的包,用 --save-dev 存到 devDependencies, 比如 eslint、webpack。

瀏覽器中執行的 js 用到的包存到 dependencies, 比如 jQuery 等。

4、運行項目

在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。

這里簡單介紹下 npm run dev 命令,其中的“run”對應的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一個快捷方式。

項目運行成功后,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。

整理自:如何運行vue項目

如何運行從github上down下來的項目


免責聲明!

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



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