一、確保已經安裝了npm 或者 yarnhtml
查看是否安裝了npm或yarn:在控制檯輸入npm -v 或 yarn -v 能看到版本號就表明已經安裝vue
(注意:Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+))node
二、全局安裝vue腳手架工具 vue-cliwebpack
(這裏安裝的是vue-cli 2.X 的腳手架工具)git
yarn global add vue-cli # OR npm install -g vue-cli
安裝後,能夠在控制檯輸入 vue --version 驗證是否安裝成功)github
另:web
若是要安裝3.X的腳手架工具,輸入命令:vue-cli
yarn global add @vue/cli # OR npm install -g @vue/cli
//若是是用3.X的腳手架工具,還須要安裝@vue/cli-init才能使用 vue init命令
yarn global add @vue/cli-init
# OR
npm install -g @vue/cli-init
三、使用vue-cli初始化項目npm
控制檯切換到你的項目存放路徑,輸入:json
vue init <template-name> <project-name>
<template-name> : 模板名稱,vue-cli提供了5中模板:
①webpack : 一個全面的webpack+vue-loader的模板,功能包括熱加載,linting,檢測和CSS擴展。
②webpack-simple : 一個簡單webpack+vue-loader的模板,不包含其餘功能,讓你快速的搭建vue的開發環境。
③browserify : 一個全面的Browserify+vueify 的模板,功能包括熱加載,linting,單元檢測。
④browserify-simple : 一個簡單Browserify+vueify的模板,不包含其餘功能,讓你快速的搭建vue的開發環境。
⑤simple : 一個最簡單的單頁應用模板。
<project-name> : 項目名稱(不能包含大寫字母,不然會報錯)
例:
vue init webpack my-vue
輸入命令後,會詢問一些選項:
注意:
①Use ESLint to line your code ?選擇 No ----ESLint的不少規範和咱們平時開發的習慣不太一致,因此這裏不建議使用
②Should we run `npm install` for you after the project has been created?選擇No, I will handle that myself ----我安裝的時候,選擇Yes,use Yarn最後卡在了最後一步,可是選擇No之後,再本身執行yarn 就成功了。。。。
四、進入到 my-vue 目錄下,安裝package.json 文件中的依賴包
>cd my-vue >yarn //強烈推薦使用yarn 或 >npm install
如圖:
輸入命令後等待依賴包安裝完成便可
(注意,yarn安裝自動生成的yarn.lock 存放了安裝過程當中的重要信息,必定要放到版本控制當中,不然多人共同開發可能會引發一些錯誤)
五、運行項目
輸入如下命令:
yarn run dev
# OR
npm run dev
而後便可在瀏覽器中輸入 localhost:8080 瀏覽:
六、vue項目目錄說明:
├── build/ # webpack 編譯任務配置文件: 開發環境與生產環境 │ └── ... ├── config/ │ ├── index.js # 項目核心配置 │ └── ... ├ ── node_module/ #項目中安裝的依賴模塊 ── src/ │ ├── main.js # 程序入口文件 │ ├── App.vue # 程序入口vue組件 │ ├── components/ # 組件 │ │ └── ... │ └── assets/ # 資源文件夾,通常放一些靜態資源文件 │ └── ... ├── static/ # 純靜態資源 (直接拷貝到dist/static/裏面) ├── test/ │ └── unit/ # 單元測試 │ │ ├── specs/ # 測試規範 │ │ ├── index.js # 測試入口文件 │ │ └── karma.conf.js # 測試運行配置文件 │ └── e2e/ # 端到端測試 │ │ ├── specs/ # 測試規範 │ │ ├── custom-assertions/ # 端到端測試自定義斷言 │ │ ├── runner.js # 運行測試的腳本 │ │ └── nightwatch.conf.js # 運行測試的配置文件 ├── .babelrc # babel 配置文件 ├── .editorconfig # 編輯配置文件 ├── .gitignore # 用來過濾一些版本控制的文件,好比node_modules文件夾 ├── index.html # index.html 入口模板文件 └── package.json # 項目文件,記載着一些命令和依賴還有簡要的項目描述信息 └── README.md #介紹本身這個項目的,可參照github上star多的項目。 build/