Vue-Router路由Vue-CLI腳手架和模塊化開發 之 Vue-CLI 2.x腳手架工具基於webpack simple模板與基於webpack模板構建項目

Vue-CLI 2.x腳手架工具基於webpack simple模板構建項目   

vue-cli是一個基於vue.js進行快速開發的完整系統。基於webpack構建，並進行默認配置，可經過插件擴展，可升級； vue-cli幫咱們建立基本項目結構，跳過繁瑣的項目配置環節，將精力集中在業務上；

vue-cli的版本：

• @vue/cli 3.x版本：點擊前往官網

•  

   

• vue-cli 2.x版本：點擊前往官網

 

  安裝vue-cli

$ npm install -g vue-cli

 

 安裝成功，查看其版本：

 

 

 

 使用webpack-simple建立一個項目：

 

 

建立的項目：

 

 

 

package.json:

 

 

 

按照給與的提示進行運行項目：

 

 在瀏覽器中出現該頁面，說明項目建立成功：

 

 解析一下生成的項目目錄：

將App.vue內容修改成：

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <h1>{{ msg }}</h1>
 5    
 6   </div>
 7 </template>
 8 
 9 <script>
10 export default {
11   name: 'app',
12   data () {
13     return {
14       msg: '歡迎來到perfect*的博客園'
15     }
16   }
17 }
18 </script>
19 
20 <style>
21 #app {
22   font-family: 'Avenir', Helvetica, Arial, sans-serif;
23   -webkit-font-smoothing: antialiased;
24   -moz-osx-font-smoothing: grayscale;
25   text-align: center;
26   color: #2c3e50;
27   margin-top: 60px;
28 }
29 
30 h1, h2 {
31   font-weight: normal;
32 }
33 
34 ul {
35   list-style-type: none;
36   padding: 0;
37 }
38 
39 li {
40   display: inline-block;
41   margin: 0 10px;
42 }
43 
44 a {
45   color: #42b983;
46 }
47 </style>

App.vue

在瀏覽器中顯示的效果：

 

 項目目錄：

 

 webpack.config.js:

 

 在項目目錄中並無build.js,可是項目中卻引入了：

使用該指令就能夠生成build.js:npm run build

 

 

 

 

 Vue-CLI 2.x腳手架工具基於webpack模板構建項目

webpack，全面的模板：包含webpack、vue-loader設置、熱加載、語法檢查、測試；

• 語法檢查：ESLint：統一項目的代碼規範，命名、縮進、空格、製表符、標點符號等，能夠套用預設，也能夠自行修改規則；
• 官網：點擊前往

使用webpack進行建立項目：

 

 

因爲建立項目安裝的內容比較多，須要耐心等待

只需在src文件夾下進行開發項目便可：

生成的項目：

 

 運行項目：

 

 

在瀏覽器中的效果：