簡介

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.