vue-cli4腳手架搭建一

 

涉及內容

html  css   javascript   node.js   npm    webpack

2.9.6是常用版本

vue-cli4是基於webpack的

webpack是基於node.js的

npm:node package manager，是nodejs的包管理器，通常使用淘寶鏡像;這是npmjs.org的一個鏡像，由於在國內，網速相對國外快。該鏡像每十分鍾與官方同步一次。

 

下載nodejs並安裝或者yum/apt-get安裝

https://cdn.npm.taobao.org/dist/node/v14.4.0/node-v14.4.0-linux-x64.tar.xz

tar -xvf node-v14.4.0-linux-x64.tar.xz

 

sudo apt-get install nodejs

sudo apt-get install npm

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

 

$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.5 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.19.0 (/usr/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
linux x64 5.4.0-39-generic 
registry=https://r.npm.taobao.org

yarn是facebook公司用於替代npm的一個包管理器

sudo npm i yarn -g -verbose
sudo yarn config set registry https://registry.npm.taobao.org

$ yarn -v
1.22.4

 

安裝vue-cli 3或4版本說明

本地安裝會安裝到當前目錄

cnpm install @vue/cli

$ ls
node_modules

 

vue-cli 2版本的安裝方式

npm install -g vue-cli

 

安裝指定版本

2版本：cnpm install -g vue-cli@版本號

3及以上版本：cnpm install -g @vue/cli@版本號

 

正式安裝

sudo cnpm install -g @vue/cli

安裝vue-cli模塊到/usr/local/lib/node_modules，並創建下面的鏈接（下面的鏈接是自動創建的，無須再重復創建），於是可以全局使用vue

[@vue/cli@4.4.6] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

$ vue -V
@vue/cli 4.4.6

創建項目

 

Babel轉碼器，把EC6/7代碼轉換為瀏覽器可以識別的編碼

至少需要安裝Babel和Router

vue create vue2

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

上下鍵移動光標，空格鍵選擇或取消，回車鍵下一步

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router

路由模式分為歷史模式和hash模式兩種，hash模式url中有#號，history沒有但需要代碼中配置，2版本3版本為hash模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

配置是放在package中還是指定的配置文件里，按默認走

? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files
  In package.json

以后的模塊是否按當前的模式搭建

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

🎉  Successfully created project vue2.
👉  Get started with the following commands:

 $ cd vue2
 $ yarn serve

 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

 

啟動

$ cd vue2
$ yarn serve
yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2084ms                                                                                                                        5:26:11 PM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.43.157:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

 

2版本的啟動方式，進入項目目錄，npm run dev

項目文件：

$ ll
total 384
drwxrwxr-x   6 tanpengfei3 tanpengfei3   4096 6月  27 17:25 ./
drwxrwxr-x   4 tanpengfei3 tanpengfei3   4096 6月  27 17:24 ../
-rw-rw-r--   1 tanpengfei3 tanpengfei3     73 6月  27 17:25 babel.config.js
-rw-rw-r--   1 tanpengfei3 tanpengfei3     30 6月  27 17:25 .browserslistrc
drwxrwxr-x   7 tanpengfei3 tanpengfei3   4096 6月  27 17:25 .git/
-rw-rw-r--   1 tanpengfei3 tanpengfei3    230 6月  27 17:25 .gitignore
drwxrwxr-x 758 tanpengfei3 tanpengfei3  28672 6月  27 17:26 node_modules/
-rw-rw-r--   1 tanpengfei3 tanpengfei3    436 6月  27 17:25 package.json
drwxrwxr-x   2 tanpengfei3 tanpengfei3   4096 6月  27 17:25 public/
-rw-rw-r--   1 tanpengfei3 tanpengfei3    263 6月  27 17:25 README.md
drwxrwxr-x   6 tanpengfei3 tanpengfei3   4096 6月  27 17:25 src/
-rw-rw-r--   1 tanpengfei3 tanpengfei3 321757 6月  27 17:25 yarn.lock

node_modules通常不提交git，其他的文件都可以提交

public 存放公共資源，比如圖片

src 源代碼

package.json 項目依賴的文件

yarn.lock 文件備份

README.md 說明文檔

babel.config.js 之前安裝的babel ES轉碼器配置

 

package.json文件

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

serve 啟動命令

build 編輯打包

依賴的vue版本是2.6，vue-router版本是3.2

 

 

$ ll src/
total 32
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月  27 17:25 ./
drwxrwxr-x 6 tanpengfei3 tanpengfei3 4096 6月  27 17:25 ../
-rw-rw-r-- 1 tanpengfei3 tanpengfei3  526 6月  27 17:25 App.vue
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月  27 17:25 assets/
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月  27 17:25 components/
-rw-rw-r-- 1 tanpengfei3 tanpengfei3  175 6月  27 17:25 main.js
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月  27 17:25 router/
drwxrwxr-x 2 tanpengfei3 tanpengfei3 4096 6月  27 17:25 views/

main.js 是項目入口文件

App.vue 是一個組件，項目入口的組件，以大寫字母開頭,后綴.vue

router 路由

assets 靜態資源，CSS / 字體  / 圖片

views 展示的組件視圖

components 組件，這里面放的是可以作為其他.vue后綴文件中組件使用的組件。模板中components放的是HelloWorld.vue，views/Home.vue中的使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

通過一個<HelloWorld/>標簽來使用

vue項目本質上是一個Node.js項目，不同於其他的web項目根目錄看到index.html，main.html之類的主頁，這類項目的主頁是main.js。

本質上他們都一樣，都是html dom + js +css的組合文件，不同的是，之前的web項目更像是在html中引入了js和css，而node.js則是在js文件中引入了html dom,並通過js實現了一個輕量的事件驅動請求/響應服務器。這個服務器的存在，讓node.js項目與之前的web+額外的服務器的方式有了很大的區別，這使得js的地位大增。實際上Js是一種語言，可以寫各種軟件，甚至是數據庫，而html dom只是一種標識，無疑Js的功能要強大的多，以此為主導並無不妥。

main.js文件中引入了路由，初始化了Vue對象，引入了其他組件，成為了項目的入口。