簡介
vue是一個JavaMVVM庫，是一套用於構建使用者介面的漸進式框架，是初創專案的首選前端框架。它是以資料驅動和元件化的思想構建的，採用自底向上增量開發的設計。它是輕量級的，它有很多獨立的功能或庫，我們會根據我們的專案來選用vue的一些功能。它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js.
安裝vue
Vue環境安裝
執行vue等技術開發的客戶端專案,需要安裝Node.js環境
Node下載
可以到nodejs的下載頁面: http://nodejs.cn/download/下載對應的安裝包
1.Windows電腦安裝Nodejs環境
- 1、windows環境下選擇.msi安裝檔案。然後進行雙擊node.msi，選擇安裝路徑。
- 2、配置環境變數。在計算機（或者我的電腦）右擊屬性 -> 高階系統設定 -> 環境變數進行配置。新建NODE_PATH變數並設定Nodejs的安裝目錄。
macOS系統安裝Nodejs
在終端中使用brew命令安裝nodejs。詳細命令：
brew install nodejs
Linux系統安裝Nodejs
在nodejs的下載頁面選擇linux類別下的64位檔案，下載檔案為tar.xz格式的壓縮檔案。然後依次執行解壓縮和建立軟連線的命令：
tar -xvf node-v10.15.3-linux-x64.tar.xz
vi /etc/profile
export NODEJS=/opt/node/node-v10.15.3-linux-x64
export PATH=$NODEJS/bin:$PATH
// 儲存/etc/profile檔案後
node -v
// 看版本
安裝腳手架工具vue-cli
/*
npm install --global vue-cli
*/
安裝webpack
/*
npm install -g webpack
vue init webpack myVue
npm install -g webpack
/Users/youmen/.nvm/versions/node/v10.14.2/bin/webpack -> /Users/youmen/.nvm/versions/node/v10.14.2/lib/node_modules/webpack/bin/webpack.js
+ webpack@5.4.0
added 82 packages from 122 contributors in 6.878s
\W $ vue init webpack myvue
? Project name helloworld
? Project description student vue demo1
? Author youmen@163.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has
been created? (recommended) npm
安裝中有個選項(Use ESLint to line your code? 選擇No)
進入myVue,使用npm install 安裝package.json中的依賴
cd myVue
npm install
執行專案
npm run dev
*/
安裝nvm
管理node版本,非必須
// mac
git clone https://github.com/nvm-sh/nvm.git
cd nvm
./install.sh
cat ~/.bash_profile
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
// 換源
export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs
source ~/.bash_profile
nvm --version
0.37.0
// 安裝指定版本
nvm install 10.14.2
安裝yarn
包管理工具
brew install yarn
安裝vue cli
npm config set registry https://registry.npm.taobao.org/
npm install -g @vue/cli
yarn global add @vue/cli
建立vue專案
vue create ginessentail-vue
Vue CLI v4.5.8
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Lin
ter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) (Y/n) y
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
):
Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
Less
Stylus
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
success Saved lockfile.
✨ Done in 17.00s.
? Invoking generators...
? Installing additional dependencies...
yarn install v1.22.10
[1/4] ? Resolving packages...
[2/4] ? Fetching packages...
[3/4] ? Linking dependencies...
[4/4] ? Building fresh packages...
success Saved lockfile.
✨ Done in 8.86s.
⚓ Running completion hooks...
? Generating README.md...
? Successfully created project ginessentail-vue.
? Get started with the following commands:
$ cd ginessentail-vue
$ yarn serve
cd ginessentail-vue
yarn serve
引入bootstrap
yarn add vue bootstrap-vue bootstrap
專案目錄說明
/*
build：專案構建(webpack)相關程式碼
config：配置目錄，包括埠號等
node_modules：npm載入的專案依賴塊
src：這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：
assets: 放置一些圖片，如logo等
components：該目錄裡存放的我們的開發檔案元件，主要的開發檔案都存放在這裡了
App.vue：專案入口檔案
main.js：專案的核心檔案
router：路由配置目錄
static：放置一些靜態資原始檔
test：初始測試目錄，可刪除
.xxxx檔案：這些是一些配置檔案，包括語法配置，git配置等
index.html：首頁入口檔案
package.json：專案配置檔案
README.md：專案的說明文件，markdown 格式
*/
Vue專案啟動流程
1.找到package.json檔案
/*
在執行npm run dev的時候，會去在當前資料夾下的專案中找package.json檔案,啟動開發伺服器，預設埠是8080;
*/
2.找到src的main.json檔案,在該檔案中new Vue例項,要載入的模板內容App
3.App是src目錄下的App.vue結尾的檔案
4.在App.vue所對應的模板當中，有一個router-view在src目錄下有一個router資料夾，該資料夾有個index.js檔案，該檔案是配置路由詞典，指定了路由地址是空，載入HelloWorld元件
vue執行是基於node環境的,,構建vue框架之前,需要確保node環境安裝成功
vue生命週期示意圖
