[day14]Vue.js 网站基本建置

其实今年才刚学Vue.js ，目前的程度大概就是写几个简单的功能而已，要写一个比较完整的网站还是十分棘手的!期待透过这次铁人赛，可以建置一个稍微能看的社区支付网站罗!!

安装

安装vue之前，按照微软的建议可以先安装nvm-windows，主要是未来若开始开发，会需要在不同版本上开发，nvm则是可以进行版本控制，再多个版本之间切换，因为我本机没装，就不多做说明了，
而node.js 和 npm则是必要的，
直接到node.js网站下载安装，

安装完查询目前版本

node -v
>>> v15.14.0
npm -v
>>> 7.7.6

我自己习惯用yarn安装套件，所以我另外装了yarn

npm i -g yarn
yarn -v
>>> 1.22.10

接下来安装重头戏了，Vue CLI
Vue CLI

npm install -g @vue/cli
vue -V
>>> @vue/cli 4.5.12

建立专案

执行

vue create sinopacproj

依序设定，其中我原本设定为In dedicated config files，後来想想集中管理在package.json，可能是比较合适的作法。

Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
> Manually select features

? 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

? 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 (Use arrow keys)
> 2.x
  3.x (Preview)


? 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 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
? Use history mode for router? (Requires proper server setup for index fallback in production) 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


  ? Pick a linter / formatter config: 
> ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit


? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

? Save this as a preset for future projects? (y/N) N

安装完成，会呈现以下的画面

设定资讯
安装完成
安装完成，出现以下提示

执行

cd sinopacproj
yarn serve

最原始的vue.js页面就完成罗

另外於这次铁人赛中，目前安装的套件执行语法如下:

yarn add axios
yarn add bootstrap-vue

之後有用到其他的，再另外说明罗

参考来源：

微软

https://docs.microsoft.com/zh-tw/windows/dev-environment/javascript/nodejs-on-windows
https://docs.microsoft.com/zh-tw/windows/dev-environment/javascript/vue-on-windows