超級詳細非常易懂篇百侧！VUE學習筆記之vue-cli搭建項目

聲明：這是之前使用vue-cli2.x的版本哦~
使用vue-cli3見vue-cli3搭建項目 + 引入 element ui 實例

vue-cli就是一個腳手架，步驟很簡單，輸入幾個命令之后就會生成整個項目宠页，里面包括了webpack、ESLint膨俐、babel很多配置等等勇皇，可以快速構(gòu)建一個VUE項目 ~
具體操作如下：
安裝vue-cli的前提是你已經(jīng)安裝了npm，
在命令行工具中輸入npm -v 命令來檢測npm的安裝以及版本情況焚刺。

一敛摘、安裝

1.安裝node

node下載地址：
安裝成功提示：

npm -v
3.10.5

2.安裝vue-cli

全局安裝vue-cli，命令行：

npm install vue-cli -g

PS：-g代表全局安裝乳愉，然后查看版本：

vue -V
2.9.6

PS: 注意這里的V是大寫

二兄淫、初始化項目

1.vue init命令講解

用vue init命令來初始化項目，具體使用方法如下：

vue init <template-name> <project-name>

init：表示要用vue-cli來初始化項目
<template-name>：表示模板名稱蔓姚，vue-cli官方提供的5種模板：

webpack：一個全面的webpack+vue-loader的模板捕虽，功能包括熱加載，linting,檢測和CSS擴展坡脐。

webpack-simple：一個簡單webpack+vue-loader的模板泄私，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。

browserify：一個全面的Browserify+vueify 的模板晌端，功能包括熱加載捅暴，linting,單元檢測。

browserify-simple：一個簡單Browserify+vueify的模板咧纠，不包含其他功能蓬痒，讓你快速的搭建vue的開發(fā)環(huán)境。

simple：一個最簡單的單頁應用模板漆羔。

<project-name>：標識項目名稱梧奢，用戶根據(jù)自己的項目來起名字。

2.項目初始化

在實際開發(fā)中演痒，一般都會使用webpack這個模板亲轨，命令使用如下：

vue init webpack my-vue-demo

cmd初始化項目截圖，?ps：截圖是別人的不是我的~

Project name：項目名稱鸟顺，默認為初始化建項目的名稱my-vue-demo瓶埋，不需要直接回車
Project description：項目描述，默認為A Vue.js project诊沪，不需要直接回車
Author：作者，如果有配置git的作者曾撤，自動會讀取端姚。直接回車
Install vue-router? 是否安裝vue的路由插件，需要安裝挤悉，選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格渐裸。不需要輸入n，需要選擇y装悲，如果是大型團隊開發(fā)昏鹃，最好是進行配置
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具，不需要輸入n诀诊，需要選擇y
Setup e2e tests with Nightwatch? 是否安裝e2e來進行用戶行為模擬測試洞渤，不需要輸入n，需要選擇y

初始化完成之后會出現(xiàn)以下信息属瓣，表示操作成功载迄。

# Project initialization finished!
# ========================

To get started:

  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

3.運行項目

cd my-vue-demo

使用cd命令進入到項目目錄

npm run dev

以上命令為開發(fā)模式下運行項目

npm run build

以上命令為項目發(fā)布打包

4.成功頁面

完成~(≧▽≦)/~啦啦啦真棒??

ps:http://www.reibang.com/p/19ed3e02ef8d

三、項目結(jié)構(gòu)

1.總體框架

一個vue-cli的項目結(jié)構(gòu)如下抡蛙，其中src文件夾是需要掌握护昧，其余了解即可。
文件夾目錄如下：

文件夾目錄截圖

每個文件夾目錄詳細說明如下：

貼心的目錄說明

2.配置目錄文件講解

1?? build目錄（webpack配置）
build文件主要是webpack的配置粗截，目錄詳情如下：

2?? config目錄（vue項目配置目錄）
config文件主要是項目相關配置惋耙，常用的就是當端口沖突時配置監(jiān)聽端口，打包輸出路徑及命名等，目錄詳情如下：

3??node_modules（項目依賴包）
node_modules里面是項目依賴包绽榛，其中包括很多基礎依賴湿酸，自己也可以根據(jù)需要安裝其他依賴。安裝方法打開命令工具蒜田，進入項目目錄稿械，輸入npm install [依賴包名稱]，回車

在兩種情況下我們會自己去安裝依賴：
》項目運行缺少該依賴包
》安裝插件：如vuex

PS：有時會安裝指定依賴版本冲粤，需在依賴包名稱后加上版本號信息美莫，如npm install vue-loader@11.1.4

3.src項目核心文件講解

核心文件目錄前面已經(jīng)說明了，下面重點講解index.html梯捕，main.js厢呵，App.vue，router的index.js傀顾，HelloWorld.vue
1?? index.html（主頁）
index.html為項目的主頁襟铭，跟其他html一樣，但一般只定義一個空的根節(jié)點短曾，在main.js里面定義的實例將掛載在根節(jié)點下寒砖，內(nèi)容都通過vue組件來填充。說明如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-vue-demo</title>
  </head>
  <body>
      <!-- 定義的vue實例將掛載在#app節(jié)點下 -->
    <div id="app"></div>
  </body>
</html>

2?? main.js（入口文件）
main.js為項目的入口文件嫉拐，即單入口哩都，主要是引入vue框架，根組件及路由設置婉徘，并且定義vue實例漠嵌，說明如下：

// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'

// 關閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false

// 定義實例
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3?? App.vue（根組件）
一個vue頁面通常由三部分組成：模板(template)、js(script)盖呼、樣式(style)儒鹿，說明如下：

<!-- 模板 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
    </div>
</template>

<!-- js代碼 -->
<script>
export default {
    name: 'App'
}
</script>

<!-- css樣式 -->
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

【template-模板】
（1）模板只能包含一個父節(jié)點，也就是說頂層的div只能有一個（如上圖几晤，父節(jié)點為#app的div约炎，其沒有兄弟節(jié)點）
（2）<router-view/>是子路由視圖插槽，后面的路由頁面都顯示在此處锌仅，相當于iframe

【script-JS代碼】
vue通常用es6來寫章钾，用export default導出，其下面可以包含數(shù)據(jù)data热芹，生命周期(mounted等)贱傀，方法(methods)等。

【style-CSS樣式】
樣式通過style標簽<style></style>包裹伊脓，默認是影響全局的府寒，如需定義作用域只在該組件下起作用魁衙，需在標簽上加scoped，<style scoped></style>

引入外部CSS示例：

<style>
    import './assets/css/public.css'
</style>

4?? router（路由配置）
router文件夾下株搔，有一個index,js的路由配置文件剖淀，說明如下

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'

// 使用路由依賴
Vue.use(Router)

// 定義路由配置
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

5?? HelloWorld.vue（頁面組件）
最熟悉的HelloWorld輸出纤房，說明如下：

<template>
  <div>
    <!-- 輸出變量 -->
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  // 定義頁面名稱纵隔，可以不要
  name: 'HelloWorld',
  data () {
    return {
      // 定義變量
      msg: 'HelloWorld'
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 16px;
  font-weight: normal;
}
</style>

重要的說明：
這篇文章是搬運的~ 由于原作者的文章是個人網(wǎng)站，讓我覺得有點兒不安全炮姨，生怕哪一天找不到了哈哈哈就搬過來了了了~ 看了很多入門的文章捌刮，就這個最簡單詳細了~ 強烈推薦給小伙伴們~ ??

我是可愛的原文鏈接君(????) 還有更多干貨值得你點擊~

???完 ???

超級詳細非常易懂篇爷怀！VUE學習筆記之vue-cli搭建項目

超級詳細非常易懂篇！VUE學習筆記之vue-cli搭建項目