vue環(huán)境搭建

環(huán)境搭建

vue推薦開發(fā)環(huán)境

Node.js：javascript運行環(huán)境(類比為python的解釋器)，不同系統(tǒng)直接運行各種編程語言；
npm： Nodejs下的包管理器（可以類比為python中的pip）琅催。由于國內(nèi)使用npm會很慢，這里推薦使用淘寶NPM鏡像（http://npm.taobao.org/）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

webpack：它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應的準備，比如資源的合并和打包片排。
vue-cli：用戶生成Vue工程模板

1.node.js安裝

從node.js官網(wǎng)下載并安裝node朵诫，安裝過程很簡單辛友，一路“下一步”就可以了（傻瓜式安裝）。
安裝完成之后剪返，打開命令行工具废累，輸入 node -v，如下圖脱盲，如果出現(xiàn)相應的版本號邑滨，則說明安裝成功。

image.png

2. npm包安裝

npm包管理器钱反，是集成在node中的掖看，所以，直接輸入 npm -v就會如下圖所示面哥，顯示出npm的版本信息哎壳。

image.png

3.cnpm安裝

由于有些npm有些資源被屏蔽或者是國外資源的原因，會導致用npm安裝依賴包的時候失敗尚卫，所有我還需要npm的國內(nèi)鏡像—cnpm耳峦。
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安裝完成如下圖焕毫。

image.png

完成之后蹲坷，我們就可以用cnpm代替npm來安裝依賴包了。

4.安裝vue-cli腳手架構(gòu)建工具

在命令行中運行命令 npm install -g vue-cli邑飒，然后等待安裝完成循签。
通過以上三部，我們需要準備的環(huán)境和工具都準備好了疙咸，接下來就開始使用vue-cli來構(gòu)建項目县匠。

5.用webpack構(gòu)建項目

要創(chuàng)建項目，首先我們要選定目錄撒轮，然后再命令行中把目錄轉(zhuǎn)到選定的目錄乞旦。這里是D:\Project，進入此目錄下

image.png

執(zhí)行命令vue init webpack vuetest题山，
這個命令的意思是初始化一個項目兰粉，其中webpack是構(gòu)建工具，也就是整個項目是基于webpack的顶瞳。其中vuetest是整個項目文件夾的名稱玖姑，這個文件夾會自動生成在指定的目錄D:\Project中愕秫。

image.png

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱焰络，描述戴甩，作者等信息，如果不想填直接回車默認就好闪彼。
打開vuetest文件夾甜孤，項目文件如下所示。

image.png

這就是整個項目的目錄結(jié)構(gòu)畏腕，其中缴川，我們主要在src目錄中做修改。這個項目現(xiàn)在還只是一個結(jié)構(gòu)框架郊尝，整個項目需要的依賴資源都還沒有安裝二跋，如下圖。

image.png

6. 安裝項目所需的依賴

要安裝依賴包流昏，首先cd到項目文件夾（vuetest文件夾）扎即，然后運行命令 cnpm install ，等待安裝况凉。
安裝完成之后谚鄙，會在我們的項目目錄文件夾中多出一個node_modules文件夾，這里邊就是我們項目需要的依賴包資源刁绒。

image.png

7. 運行項目

安裝完依賴包之后闷营，就可以運行整個項目了。
在項目目錄中知市，運行命令 npm run dev 傻盟，會用熱加載的方式運行我們的應用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果嫂丙。

image.png

項目運行成功后娘赴，瀏覽器會自動打開localhost:8080（如果瀏覽器沒有自動打開，可以手動輸入）跟啤。運行成功后诽表，會看到如下所示的界面。

image.png

我們寫代碼主要在src目錄下隅肥。

image.png

src\App.vue相當于主組件竿奏，其他子組件需要掛載它里面。

<!--一個組件有三分部分組成 -->
<template>
  <!-- 頁面結(jié)構(gòu)-->
  <div class="app">  <!-- 這里最外層必須由一個元素包括腥放，不能并排泛啸，否則報錯，相當于一個組件一個區(qū)域捉片，由一個大的包括起來 -->
    <h3>{{msg}}</h3>
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>
  </div>
</template>


<script>
  // 1. 先引入子組件
  import Vheader from './components/Vheader.vue'
  import Vcontent from './components/Vcontent'  // .vue可以省略不寫
  import Vfooter from './components/Vfooter'


   //頁面的業(yè)務邏輯
   export default {
     name: 'App',
     data(){
       return {
         msg: 'Hello vue 組件'
       }
     },
     methods:{

     },
     computed:{

     },
     // 掛載
     components:{
       Vheader: Vheader,
       Vcontent,
       Vfooter   // 如果key-value字段名一樣平痰，可以省略只寫一個
     }
   }

</script>

在components目錄下創(chuàng)建三個子組件

image.png

Vheader.vue

<template>
    <header class="nav">
        我是header
    </header>
</template>

<script>
    export default {
        name: 'Vheader',
        data(){
            return {

            }
        }
    }
</script>

<style scoped>  /*scoped表示css樣式只作用于自身*/

</style>

Vcontent.vue

<template>
    <div class="content">
        我是content
    </div>
</template>

<script>
    export default {
        name: 'Vcontent',
        data(){
            return {

            }
        }
    }
</script>

<style>


</style>

Vfooter.vue:

<template>
    <footer class="foot">
        我是footer
    </footer>
</template>

<script>
    export default {
        name: 'Vfooter',
        data(){
            return {

            }
        }
    }
</script>

<style>


</style>

運行 npm run dev

image.png