1. 安裝npm

• 詳細(xì)參考下面的文章：
  npm常用命令 + 前端常用的包管理工具 以及 npm淘寶鏡像配置等.

2. 安裝 Vue CLI

• 安裝前可使用 nrm 切換到淘寶鏡像，如下：

  nrm use taobao
  

  
• 安裝命令：

  npm install -g @vue/cli
  # OR
  yarn global add @vue/clisudo npm install -g @vue/cli  #Mac
  

  
• 使用命令，查看安裝版本

  vue
  vue -V
  

  
• 官網(wǎng)地址：
  https://cli.vuejs.org/zh/.

3. 創(chuàng)建 vue_demo1 項(xiàng)目（官網(wǎng)）

3.1 創(chuàng)建 vue_demo1 項(xiàng)目

3.1.1 創(chuàng)建項(xiàng)目

• 命令：

  vue create vue_demo1sudo vue create vue_demo1   # Mac的要想解決這個(gè)sudo的束縛，看下面的 3.1.2 解決 sudo 問(wèn)題
  

  

3.1.2 解決 sudo 問(wèn)題

• 每次必須加上 sudo 挺麻煩的，想要解決的話(huà)，根據(jù)提示解決，先看提示，如下：
  
• 輸入提示命令解決：

  sudo chown -R 501:20 "/Users/XXX/.npm"
  

  

3.2 查看創(chuàng)建的 vue_demo1 項(xiàng)目

3.2.1 項(xiàng)目結(jié)構(gòu)

• 如下：
  

3.2.2 項(xiàng)目結(jié)構(gòu)簡(jiǎn)單說(shuō)明

• main.js 文件是項(xiàng)目的入口
  
• App.vue 組件是所有組件的父組件
  

3.3 運(yùn)行 vue_demo1 項(xiàng)目

• 命令如下：

  npm run servesudo npm run serve  # Mac權(quán)限問(wèn)題用這個(gè)
  

  
• 訪問(wèn)：
  

4. 創(chuàng)建 vue_demo2 項(xiàng)目（入門(mén)練習(xí)）

4.1 創(chuàng)建項(xiàng)目

• 跟上面的步驟一樣，再創(chuàng)建一個(gè)新的項(xiàng)目 vue_demo2 ，用于修改練習(xí)，創(chuàng)建過(guò)程不再介紹。

4.2 編寫(xiě)組件

• 組件結(jié)構(gòu)如下：
  

4.3 編寫(xiě)main.js

• 如下：

  import Vue from 'vue'
  import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#dogZool',render: h => h(App),});
  

  

4.4 編寫(xiě)index.html

• 如下：
  

4.5 啟動(dòng)看效果

• 打包項(xiàng)目

  npm run build
  

• 啟動(dòng)命令：

  npm run serve
  

• 效果：
  

  

4.6 附代碼

4.6.1 組件

• ZooHead.vue

  <template><div><h2 >{{zoolTitle}}</h2><nav style="float: right;"><a href="#">首頁(yè)</a><a href="#">我的關(guān)注</a><a href="#">我的收藏</a><a href="#">我的</a></nav></div>
  </template><script>export default{name:'ZooHead',data() {return{zoolTitle:'01-歡迎來(lái)到狗狗樂(lè)園！！'}}};
  </script><!-- scoped 處理組件樣式?jīng)_突 -->
  <style scoped>div{height: 80px;}h2{color: green;}nav a{padding-left: 20px;}</style>
  

• DogInfo.vue

  <template><div ><h2 >02-狗狗信息</h2><table><caption>狗狗信息</caption><thead><tr><th>狗狗編號(hào)</th><th>狗狗姓名</th><th>狗狗性別</th><th>狗狗年齡</th><th>狗狗種類(lèi)</th><th>備注</th></tr></thead><tbody><tr v-for="dog in dogs" v-bind:key="dog.dogNum"><td>{{dog.dogNum}}</td><td>{{dog.dogName}}</td><td>{{dog.sex}}</td><td>{{dog.dogAge}}</td><td>{{dog.dogKind}}</td><td>{{dog.dogDesc}}</td></tr></tbody></table></div>
  </template><script>export default{name:'DogInfo',data() {return{dogs:[{dogNum:'A1001',dogName:'麥兜',sex:'女',dogAge:3,dogKind:'邊牧',dogDesc:'溫柔、調(diào)皮又粘人'},{dogNum:'A1002',dogName:'貝塔',sex:'女',dogAge:3,dogKind:'邊牧',dogDesc:'性格溫柔'},{dogNum:'A1003',dogName:'大牙',sex:'男',dogAge:2,dogKind:'邊牧',dogDesc:'活潑'},{dogNum:'A1004',dogName:'泡泡',sex:'女',dogAge:6,dogKind:'柯基',dogDesc:'性格溫柔'},					{dogNum:'A1005',dogName:'樂(lè)樂(lè)',sex:'男',dogAge:1,dogKind:'柴犬',dogDesc:'調(diào)皮'},{dogNum:'A1006',dogName:'閃閃',sex:'男',dogAge:9,dogKind:'秋天',dogDesc:'高傲'},{dogNum:'A1007',dogName:'托尼',sex:'女',dogAge:3,dogKind:'邊牧',dogDesc:'聰明'}	]}}};
  </script><style scoped>table caption{font-size: 25px;background-color: aqua;}table{background-color: aqua;border: 1px solid;border-collapse: collapse;width: 800px;height: 300px;margin-bottom: 30px;/* border-radius: 10px; */}th,td{border: 1px solid;text-align: center;}h2{color: rebeccapurple;}</style>
  

• ZooBottom.vue

  <template><div ><h2 >{{zoolMore}}</h2><footer><nav><a href="#">關(guān)于我們</a><a href="#">聯(lián)系我們</a><a href="#">友情鏈接</a><a href="#">了解更多</a></nav></footer></div>
  </template><script>export default{name:'ZooBottom',data() {return{zoolMore:'03-更多'}}};
  </script><style scoped>h2{color: skyblue;}a{padding-left: 20px;}</style>
  

• App.vue

  <template><div><ZooHead></ZooHead><hr><DogInfo></DogInfo><hr><ZooBottom></ZooBottom></div>
  </template><script>//引入組件import ZooHead from "./components/ZooHead.vue"import DogInfo from './components/DogInfo' //.vue 可省略import ZooBottom from './components/ZooBottom'export default{name:'app',components:{ZooHead,DogInfo,ZooBottom}};</script><style>
  </style>
  

4.6.2 其他

• main.js

  import Vue from 'vue'
  import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#dogZool',render: h => h(App),});
  

• index.html

  <!DOCTYPE html>
  <html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="dogZool"><App></App></div></body>
  </html>

5. tomact 上部署腳手架vue項(xiàng)目

51. 安裝 并 啟動(dòng) tomcat

• 關(guān)于 tomcat的安裝等問(wèn)題，自己解決一下，或者參考下面的文章：
  linux下安裝tomact.

5.2 部署vue項(xiàng)目

• 將 build 后的 dist 文件上傳到服務(wù)器上，放到 tomcat 的 webapps 目錄下，我這里又加了一層 vue_demo ，如下：
  

5.3 訪問(wèn)項(xiàng)目

• 直接輸入，訪問(wèn)即可，注意端口號(hào)，我這里把tomact 的端口改成了 8089，如下：

  http://服務(wù)器IP:tomact端口/vue_demo/dist/index.html
  

  

6. nginx 上部署腳手架vue項(xiàng)目

6.1 關(guān)于nginx的安裝、配置等

• 關(guān)于nginx的安裝、配置等，可看下面的文章
  • Nginx 01篇——Nginx詳細(xì)安裝步驟以及Nginx各種啟動(dòng)方式
  • Nginx 02篇——Nginx基本配置與參數(shù)說(shuō)明篇
  • Nginx 03篇——Nginx配置實(shí)例

6.2 將打包后的dist文件上傳的服務(wù)器上

6.2.1 上傳服務(wù)器

• 存放目錄，如下：

  cd /nginx_test/vue_project/vue_demo
  

  

6.2.2 注意問(wèn)題-403

• 我這里剛開(kāi)始將項(xiàng)目放到了 susu 用戶(hù)下，如下：
  

• 出先的問(wèn)題就是 403，如下：
  

• 問(wèn)題原因：
  我這里是 root 用戶(hù)啟動(dòng)的 nginx，所以這里有訪問(wèn)權(quán)限的問(wèn)題。

• 解決問(wèn)題：
  解決辦法：把 nginx 的啟動(dòng)用戶(hù)改成目錄的所屬用戶(hù)，重啟 Nginx 即可解決，配置如下：

  user susu
  

  

• 重新訪問(wèn)

  • 修改完配置之后，然后 root 用戶(hù)重啟動(dòng) nginx，再次訪問(wèn)，問(wèn)題已解決。

  • 當(dāng)然，也可以用 susu 用戶(hù)啟動(dòng)，root 用戶(hù)安裝的 nginx 也可以，如下：

    sudo ./nginx 
    

    

    如果因?yàn)闄?quán)限問(wèn)題不能啟動(dòng)，請(qǐng)參考下面這篇文章：
    linux下新建用戶(hù)并給用戶(hù)授權(quán)以及解決 sudo 不能使用問(wèn)題.

6.3 配置nginx

• 如下：

    server {listen 9007;server_name 服務(wù)器IP;location /dist/ {
  #        root  /home/susu/vue_project/vue_demo/;root  /nginx_test/vue_project/vue_demo/;}}
  

  

6.4 重啟nginx，訪問(wèn)看效果

• 如下：

  http://服務(wù)器IP:9007/dist/index.html
  

  

6.5 防火墻問(wèn)題

• 如果拒絕訪問(wèn)，查看防火墻問(wèn)題，可以看下面的文章：
  linux下查看防火墻狀態(tài)、關(guān)閉防火墻、開(kāi)放關(guān)閉端口等.

7. 遇到的問(wèn)題

7.1 組件之間樣式?jīng)_突

• 解決問(wèn)題：
  用 style 標(biāo)簽上的 scoped 屬性，如下：
  

7.2 部署服務(wù)器上的頁(yè)面不加載

7.2.1 詳細(xì)問(wèn)題如下：

• 本地啟動(dòng)：
  
• 服務(wù)器上：
  

7.2.2 問(wèn)題原因 + 解決問(wèn)題

• 問(wèn)題原因：
  資源路徑問(wèn)題，服務(wù)器上路徑不對(duì)，解決路徑即可
• 解決問(wèn)題：
  在vue.config.js中配置 publicPath:'./' 即可，如下：
  
• 打包，重新部署問(wèn)題解決！

8. 項(xiàng)目下載

• 下載：vue腳手架項(xiàng)目入門(mén)demo（vue2）.