01 . Vue簡介,原理,環境安裝
阿新 • • 發佈:2020-11-13
簡介
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 + [email protected] added 82 packages from 122 contributors in 6.878s \W $ vue init webpack myvue ? Project name helloworld ? Project description student vue demo1 ? Author [email protected] ? 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.