1. 程式人生 > >Vue安裝及項目搭建

Vue安裝及項目搭建

str 模塊加載 下載 https 控制 靜態檢查 版本 安裝 spa

1.vue安裝

1.1、直接<script>標簽引入

官網下載地址為:https://cn.vuejs.org/v2/guide/installation.html#AMD-模塊加載器

點擊開發版本進行下載

1.2、使用CDN方式

  • BootCDN(國內) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
  • unpkg:https://unpkg.com/vue/dist/vue.js
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

*雖然還有其它方式,但是對於初學者來說以上兩種方式最簡單

1.3、NPM方式

打開控制臺,輸入命令

npm install vue

這樣在你的本地就會出現一個名為node_modules的文件夾裏面就是vue的項目文件

那麽問題來了,安裝好了vue怎麽進行項目搭建呢?我們就要用到下面的

命令行工具CLI

在控制臺中輸入如下命令

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目(可選安裝目錄)
$ vue init webpack my-project
#運行完上面命令會進行一些簡單的設置可參照http://www.runoob.com/vue2/vue-install.html # 安裝依賴,進入項目安裝並運行 $ cd my-project $ npm install $ npm run dev

然後控制臺會彈出,表示運行項目成功

DONE  Compiled successfully in 4541ms

 I  Your application is running here: http://localhost:8080

至此vue簡單的安裝及創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目就完成了~~~

Vue安裝及項目搭建