前言
隨着vue在前端不斷的壯大起來，越來越多的前端工程師使用vue了，作為大型項目的開發，vue-cli是不二之選，所以這篇博客是為搭建vue-cli所寫，想要搭建vue-cli項目就必須先有git,node.js,webpack,等工具，這些工具的內容我就不提供了，網上的教程也一大堆，在這里我就默認你已經安裝了這些內容。
git地址：https://git-scm.com/
node.js地址：http://nodejs.cn/
本章目標
- 學會使用webstorm搭建vue-cli項目
項目搭建
然后下面這一段可能會比較久
是否選擇vue-router，這里我們選擇是，待會后面會用到
是否使用eslint檢查，這里我們選擇否
是否選擇單元測試，這里我們也選擇否
是否選擇e2e測試，這里我們選擇是
是否使用npm包管理器
然后項目就搭建完成了，接下來我們需要選擇安裝包
假如您的網速比較慢的話，我們可以在控制台中輸入 cnpm install
當所有安裝包下載完成之后我們就可以啟動我們的項目了
在地址攔輸入http://localhost:8088，如何出現如下界面，那么恭喜你搭建成功了
接下來，我們對vue-cli中的各個項目進行分析，方便我們以后的開發中能夠更好的進行管理
項目目錄:
|-- build // 項目構建(webpack)相關代碼 | |-- build.js // 生產環境構建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱重載相關 | |-- dev-server.js // 構建本地服務器 | |-- utils.js // 構建工具相關 | |-- webpack.base.conf.js // webpack基礎配置 | |-- webpack.dev.conf.js // webpack開發環境配置 | |-- webpack.prod.conf.js // webpack生產環境配置 |-- config // 項目開發環境配置 | |-- dev.env.js // 開發環境變量 | |-- index.js // 項目一些配置變量 | |-- prod.env.js // 生產環境變量 | |-- test.env.js // 測試環境變量 |-- src // 源碼目錄 | |-- components // vue公共組件 | |-- store // vuex的狀態管理 | |-- App.vue // 頁面入口文件 | |-- main.js // 程序入口文件，加載各種公共組件 |-- static // 靜態文件，比如一些圖片，json數據等 | |-- data // 群聊分析得到的數據用於數據可視化 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義代碼格式 |-- .gitignore // git上傳需要忽略的文件格式 |-- README.md // 項目說明 |-- favicon.ico |-- index.html // 入口頁面 |-- package.json // 項目基本信息
測試案例
如果項目構建成功之后，那么接下來就開發我們自己的項目，在這里我就做一個小案例，方便大家理解和應用，那么我們接下來的這個案例是關於vue路由的使用，首先我們在src/components目錄下構建三個組件componentA,componentB,componentC,結構如下:
ComponentA代碼如下：
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentA',
data(){
return{
msg:'這是組件A',
}
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
ComponentB代碼如下：
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentB',
data(){
return{
msg:'這是組件B',
}
}
}
</script>
<style scoped>
h1{
color: yellow;
}
</style>
ComponetC代碼如下：
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentC',
data(){
return{
msg:'這是組件C',
}
}
}
</script>
<style scoped>
h1{
color:blue;
}
</style>
三個組件構建完成之后，我們修改src/router/index.js，在這里我們引入我們定義的三個組件，實例代碼如下:
import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/HiComponent'
import A from '@/components/ComponentA'
import B from '@/components/ComponentB'
import C from '@/components/ComponentC'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'hi',
component: Hi,
},
{
path: '/a',
name: 'A',
component: A,
},
{
path: '/b',
name:'B',
component:B,
},
{
path:'/c',
name:'C',
component:C,
}
]
})
我們修改index.html中的相關內容，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>project_03</title>
</head>
<body>
<div id="app">
<ul>
<li>
<a href="#/a">這是組件A</a>
</li>
<li><a href="#/b">這是組件B</a></li>
<li><a href="#/c">這是組件C</a></li>
</ul>
<!--router-view主要是構建 SPA (單頁應用) 時，方便渲染你指定路由對應的組件。你可以 router-view 當做是一個容器，它渲染的組件是你使用 vue-router 指定的。-->
<router-view></router-view>
</div>
<!-- built files will be auto injected -->
</body>
</html>
最后一步，也是最重要的一步，小編自己也會經常犯這個錯誤,我們需要修改scr/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 router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {},//重點
template: '' //重點
})
運行結果：
點擊組件A:
點擊組件B:
點擊組件C:
