vue：webpack創建完整的項目

webpack-Vue 工程項目

創建工程

使用 NPM 安裝相關組件依賴時可能會遇到權限問題，此時使用 PowerShell 管理員模式運行即可；開始菜單 -> 鼠標右擊 -> Windows PowerShell (管理員)

創建一個名為 v_music 的工程

# 使用 webpack 打包工具初始化一個名為 v_music  的工程 
vue init webpack v_music 

安裝依賴

我們需要安裝 vue-router 、 element-ui 、 vue-axios、 sass-loader 和 node-sass 四個插件

# 進入工程目錄
cd v_music
# 安裝 vue-router
npm install vue-router --save-dev
# 安裝 element-ui
npm i element-ui -S
# 安裝 axios
npm install --save axios vue-axios
# 安裝 SASS 加載器
npm install sass-loader node-sass --save-dev

# 安裝依賴
npm install

啟動工程

npm run dev

運行效果

在瀏覽器打開 http://localhost:8080 你會看到如下效果

附：NPM 相關命令說明

• npm install moduleName ：安裝模塊到項目目錄下
• npm install -g moduleName ：-g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置
• npm install -save moduleName ：--save 的意思是將模塊安裝到項目目錄下，並在 package 文件的 dependencies 節點寫入依賴， -S 為該命令的縮寫
• npm install -save-dev moduleName ：--save-dev 的意思是將模塊安裝到項目目錄下，並在 package 文件的 devDependencies 節點寫入依賴， -D 為該命令的縮寫

源碼

配置路由

1. 創建路由表

   • 在src下創建router 文件夾，里面創建index.js，此時該文件就是一個路由表

   • import Vue from 'vue'
     import VueRouter from "vue-router";
     
     import Login from "../views/login";
     
     // 安裝路由
     Vue.use(VueRouter);
     
     // 配置路由
     export default new VueRouter({
       routes:[
         {
           //路由路徑
           path:'/login',
           //路由名稱
           name:'Login',
           //跳轉到組件
           component:Login
         }
       ]
     })
     

2. 在 main.js 中配置路由表

   • // The Vue build version to load with the `import` command
     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import Vue from 'vue'
     import App from './App'
     import VueRouter from 'vue-router'	//全局使用路由模塊
     // 導入上面創建的路由配置目錄
     import router from './router'
     
     Vue.use(VueRouter);
     
     /* eslint-disable no-new */
     new Vue({
       el: '#app',
       //配置路由
       router,
       components: { App },
       template: '<App/>'
     })
     

3. 在 App.vue 中創建路由視圖

   • <template>
       <div id="app">
         <router-view>首頁</router-view>
       </div>
     </template>
     
     <script>
     
     export default {
       name: 'App'
     }
     </script>
     
     <style>
     </style>