前端_Vue

環境搭建:Windows 10 專業版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli </p>

項目創建:#vue create demo + $cd demo +  $yarn serve + $vue ui </p> 
項目結構
            ├── node_modules     # 項目依賴包目錄
            ├── public
            │   ├── favicon.ico  # ico圖標
            │   └── index.html   # 首頁模板
            ├── src 
            │   ├── assets       # 樣式圖片目錄
            │   ├── components   # 組件目錄
            │   ├── views        # 頁面目錄
            │   ├── App.vue      # 父組件
            │   ├── main.js      # 入口文件
            │   ├── router.js    # 路由配置文件
            │   └── store.js     # vuex狀態管理文件
            ├── .gitignore       # git忽略文件
            ├── .postcssrc.js    # postcss配置文件
            ├── babel.config.js  # babel配置文件
            ├── package.json     # 包管理文件
            └── yarn.lock        # yarn依賴信息文件

(1)Vue CLI 3 提供圖形化界面,提供插件,Vue CLI有幾個獨立的部分組成:

    CLI是一個全局安裝的npm包,提供終端的Vue命令.
    CLI服務是一個開發環境依賴,一個npm包,局部安裝在每個@vue/cli創建的項目中,包含加載其他CLI插件的核心服務,一個優化過的內部webpack配置,項目內部的vu-cli-service命令,提供serve,build和Inspect命令.
    CLI插件是向你的Vue項目提供可選的功能的npm包.
    (1)起步
    起步: $yarn global add@vue/cli $vue create vuecli $vue ui
    (1)-1:快速原型開發,使用vue serve和vue build命令對單個*.vue文件進行快速原型開發,先$npm install -g @vue/cli-service-global
    (1)-2:vue serve 命令可以在零配置下爲.js或.vue文件啓動一個服務器 $serve -o;打開瀏覽器 $serve -c; 將本地URL複製到剪切板 $serve -h;幫助 例子:$vue serve hello.vue
    (1)-3:vue build $build -t;構建目標 $build -n;庫的名字 $build -d;輸出目錄 $build -h;輸出用法信息 例子:$vue vue build hello.vue
    (2)插件和Preset
    (2)-1:每個CLI插件都會包含一個(用於創建文件的)生成器和一個(用來調整webpack核心配置和注入命令的)運行時插件
    $vue add @vue/eslint
    (2)-2:Vue CLI Preset是一個包含新項目所需要預定義選項的插件的JSON對象,讓用戶無需在命令提示中選擇它們.
    (3)CLI服務:
    (1)vue-cli-service serve --open 在瀏覽器啓動時打開瀏覽器
    (2)vue-cli-service serve --copy 在瀏覽器啓東時講URL複製到剪切板
    (3)vue-cli-service serve --mode 指定環境模式(默認值development)
    (4)vue-cli-service serve --host 指定host
    (5)vue-cli-service build --mode 指定環境模式
    (2) Vue Devtools