目錄
調整 index.vue 和 content.vue 文件index.vue
一、使用Idea 新建一個VUE項目
-
打開idea，File - New - Project ，選擇“Static Web”
-
Next，輸入 Project name：my-website
-
打開Idea終端工具 Terminal，輸入 `vue init webpack`,如下：
D:\project\IdeaProjects\my-website>vue init webpack ? Generate project in current directory? Yes ? Project name my-website ? Project description 我的個人網站 ? Author Rache <[email protected]> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-website". # Installing project dependencies ... # ======================== npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) removed 102 packages and audited 1724 packages in 13.256s 29 packages are looking for funding run `npm fund` for details found 99 vulnerabilities (76 low, 9 moderate, 13 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details # Project initialization finished! # ======================== To get started: npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack -
運行
方式一：終端窗口輸入命令：`npm run dev `
方式二：提前配置好Run/DeBug Configurations,點擊運行即可
（參考IDEA配置:https://blog.csdn.net/liangpingguo/article/details/106502221）# 運行成功結果如下 > [email protected] dev D:\project\IdeaProjects\my-website > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13% building modules 27/31 modules 4 active ...t\IdeaProjects\my-website\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. DONE Compiled successfully in 3439ms10:44:36 ├F10: AM┤ I Your application is running here: http://localhost:8080 Process finished with exit code 1瀏覽器訪問 http://localhost:8080 即可。
二、項目配置
-
修改/config/index.js文件：
## 修改默認端口 port: 8080 修改爲 port: 8070 ## build 項目會生成很多map文件，怎麼辦？ productionSourceMap: true 修改爲 productionSourceMap: false -
修改webpack.base.conf.js文件：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, 修改爲： module.exports = { context: path.resolve(__dirname, '../'), entry: { app: ['babel-polyfill', './src/main.js'] }, -
在src/main.js中加入：
import 'es6-promise/auto'import promise from 'es6-promise' import Api from './api/index.js' import Utils from './utils/index.js' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.prototype.$utils = Utils; Vue.prototype.$api = Api; Vue.use(ElementUI);注：使用static裏的文件儘量使用絕對路徑，如/static/image/background.png
使用src裏的文件則儘量使用相當路徑。 -
認識VUE項目的所有文件
├── README.md // 項目說明文檔
├── node_modules // 項目依賴包文件夾
├── build // 編譯配置文件，一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 項目基本設置文件夾
│ ├── dev.env.js // 開發配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 編譯配置文件
├── index.html // 項目入口文件
├── package-lock.json // npm5 新增文件，優化性能
├── package.json // 項目依賴包配置文件
├── src // 我們的項目的源碼編寫文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始項目資源目錄，回頭刪掉
│ │ └── logo.png
│ ├── components // 組件目錄
│ │ └── Hello.vue // 測試組件，回頭刪除
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夾
│ └── index.js // 路由配置文件
└── static // 資源放置目錄src結構比較簡單，我們需要重新配置：src文件夾：
├── App.vue // APP入口文件
├── api // 接口調用工具文件夾
│ └── index.js // 接口調用工具
├── components // 組件文件夾
├── frame // 子路由文件夾
├── main.js // 項目配置文件
├── page // 頁面組件文件夾
├── router // 路由配置文件夾
│ └── index.js // 路由配置文件
├── style // scss 樣式存放目錄
│ ├── base // 基礎樣式存放目錄
│ │ ├── _base.scss // 基礎樣式文件
│ │ ├── _color.scss // 項目顏色配置變量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 瀏覽器初始化文件
│ ├── scss // 頁面樣式文件夾
│ └── style.scss // 主樣式文件
└── utils // 常用工具文件夾
└── index.js // 常用工具文件static文件夾（如果是放在
src目錄裏面，則每次打包的時候，都需要打包的。這會增加打包項目的時間）：├── css // css文件夾 ├── js // js文件夾 ├── image // 圖片文件夾 └── font // 字體文件夾scss引入方法，例
<style lang="scss"> @import "./style/style.scss"; </style> -
調整App.vue，刪除無用的
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style lang="scss"> @import "./style/style"; </style>入口，只有一個空的路由視窗，我們的項目的所有內容，都基於這個視窗來展現。
我們的樣式，都將從src/style/style.scss這個文件中引用，因此，在App.vue這個文件中，直接引用./style/style即可。 -
安裝支持
scss的npm包npm install node-sass -D npm install sass-loader -D npm install style-loader --save-dev # 網絡不好，用： cnpm install node-sass -D cnpm install sass-loader -D cnpm install style-loader --save-dev # 版本問題，可能會導致運行報錯 ## 首先清除我們已經安裝過的版本： npm uninstall node-sass npm uninstall sass-loader npm uninstall style-loader ## 注意我們清除的時候可以選擇全局的清除 全局的安裝，否則下次創建 項目還會有同樣的錯誤 執行重複的操作 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ //淘寶鏡像安裝 npm install [email protected] --save-dev //安裝7.3.1版本的sass npm install style-loader --save-dev // 安裝style-loader -
調整 index.vue 和 content.vue 文件
index.vue<template> <div>index page</div> </template>content.vue
<template> <div>content page</div> </template> -
調整 router 路由文件,不然跑項目還會報錯……
# 默認的 HelloWorld import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 修改爲： import Vue from 'vue' import Router from 'vue-router' import Index from '@/page/index' import Content from '@/page/content' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Index }, { path: '/content/:id', component: Content } ] })首頁，就是我們的
Index組件:id是什麼意思？
內容頁面是要展示N條內容，如何區分，就是根據這個ID來區分的，所以，這裏使用了動態路由匹配。 -
運行項目，打開就是首頁 page/index 頁.