簡單使用vue-cli

時間 2019-11-29

標籤簡單使用 vue cli 简体版

原文原文鏈接

　　上一篇咱們簡單的看了看vue的基本用法，就是三步，首先就是用<script>標籤引入vue的依賴，而後就是寫html標籤，在標籤中用vue指令綁定一些屬性，最後就是new Vue(xxx)實例，在這個實例中有不少的實例屬性能夠給html標籤中那些綁定的屬性賦值、或者是綁定事件函數；css

　　這一篇咱們來講說vue-cli這樣的一個腳手架，快速搭建一個vue項目，注意咱們的這個腳手架能夠直接用npm下載，換句話的意思就是必需要有node環境，這裏配置node的環境就很少說了。。。html

　　vue-cli版本是2.x，如今有3.x版本的，目錄和2.x版本的有一些區別，有興趣的能夠去看看vue

1.搭建vue-cli項目node

　　若是你的node安裝好了並且環境變量配置好了，那麼輸入如下指令應該有相似這樣的輸出webpack

　　而後咱們運行npm install -g vue-cli，全局安裝一個vue-cli的模塊，由於咱們要常用的，全局安裝只用下載一次就好了，之後就能夠直接用，那麼vue-cli具體的是下載到什麼地方去了呢？默認安裝在C盤對應的用戶下的AppData目錄下，個人目錄是C:\Users\admin\AppData\Roaming\npm\node_modules，下圖所示，這個安裝路徑就用默認的就行，想要本身修改的話能夠本身搜索方法web

　　只要是npm install -g xxx 安裝的全局模塊都會在這裏，我下載了幾個經常使用的vue-router

　　而後咱們新建一個文件夾取名叫作 vue學習，用於存放咱們本身將要寫的vue-cli項目，用cmd進入這個文件夾，執行vue init webpack vueprj01 ，最後的這個vueprj01是項目名，隨便定義，不要有特殊字符和大寫字母就行，而後除了一個地方其餘地方所有回車就好，下圖所示vue-cli

　　注意，新手的話，在下圖中的Use ESLint to lint your code 這裏必定要選擇no，否則這裏就是在你編譯項目的時候作語法檢查，賊很差用，即便是一個空格也會給你報錯的npm

　　一路回車以後，一個項目就成功了，而後就等着下載那些依賴模塊就好了，反正下載的文件不少，幾分鐘吧！完成以後咱們用vscode打開這個vueprj01文件夾，技能看到下圖所示的東西：瀏覽器

　　而後咱們只須要在npm script那裏，其實就是npm腳本，點擊dev，整個項目就運行起來了；點擊這個dev就好了（其實就是至關於在cmd中進入vueprj01中，執行npm run dev命令）

　　其實點擊這裏的dev和start是同樣的效果，均可以，習慣點dev了，而後根據控制檯提示訪問http://localhost:8080，就能夠看到效果了：

　　到此爲止一個簡單的vue-cli項目就搭建出來了，很容易，下面咱們就來簡單的使用一波

2.簡單的使用vue-cli構建項目

　　在使用以前，咱們須要先了解一點基礎知識：

　　路由：也就是咱們在建立項目的時候一直回車，有一個是install vue-router，這個就是路由，那麼路由有什麼用呢？舉個不是很恰當的例子，就是路由器，當有我的都在用一個路由器的wifi的時候，爲何每一個人都能訪問不一樣的網站呢？這裏就是有路由器的做用，能夠分配不一樣的請求到不一樣的網站；在咱們這裏就是不一樣的url訪問vue項目，首先路由就會根據你的url去調用不一樣的頁面，而後渲染返回給你；

　　組件：在這裏咱們已經看不到咱們上一篇的那種作法了，上一篇是在一個html中引入vue的依賴庫，而後使用vue指令，new一個Vue實例；可是在vue-cli中咱們要學會組件化開發的思想，就是任意的一個文件就是一個組件，不管是一個vue文件，css文件仍是js文件等，都是一個組件，咱們在使用以前，必需要引入；

　　組件的基本格式：因爲每個文件都是一個組件，因此格式也不同，後面咱們會慢慢說的，這裏咱們只說以.vue爲後綴的組件，這文件分三個部分，這裏面有一個<template></template>，這裏就是寫html標籤的，注意，每個template標籤最外層必須有且只有一個div標籤，而後你的各類html標籤都要放在這個div標籤中，以下所示；第二部分就是vue實例中的各類屬性和鉤子函數，導入第三方組件只能在第二部分導入；第三部分就是寫css樣式

<template>
//注意，最外層只能有一個div標籤
  <div>
    <h1>我是h1標籤</h1>
    <div>我是div標籤</div>
    <table></table>
  </div>
</template>

<script>
//這裏就跟new Vue(xxx)中的各類屬性同樣使用
  export default {
    name:'',
    props:[''],
    data () {
      return {
      };
    },
    components: {},
    computed: {},
    beforeMount() {},
    mounted() {},
    methods: {},
    watch: {}

  }

</script>

//這裏就是寫css代碼，這裏的scoped表示該樣式只在當頁面有效，避免污染其餘頁面樣式
<style lang='' scoped>

</style>

　　引入組件的方式有兩種：

　　　　一種是相似這種，import Vue from 'vue'，import App from './App' ；（注意：引號裏面的不用加後綴，引號裏面的./表示的是當前文件所在的這一層目錄），可能有人會奇怪vue這裏沒有加./也行嗎？由於vue這個模塊是系統模塊，也就是經過npm下載的模塊（注意，不是全局下載），默認是放在項目中node_modules中，要引用這裏的模塊能夠直接引入，不用加./；

　　　　第二種方式，因爲vue-cli項目是須要node環境的，因而能夠用node引入模塊的方式，例如const prodEnv = require('./prod.env')，其實和第一種方式同樣的，固然，推薦使用第一種

　　vue-cli項目只有一個html文件，咱們只是將這個html中的div標籤內容和樣式進行替換，這也叫作單頁面開發

　　下面咱們來簡單使用一下，第一步，在src目錄下新建一個Header.vue文件，

<template>
  <div>
    <h1>這是個人第一個vue項目</h1>

<router-link :to="{ path: '/hello' }">點擊我</router-link>

  </div>
</template>

<script>
export default {};
</script>
<style lang='' scoped>
</style>

　　第二步，在router目錄下的index.js中，添加以下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入咱們本身定義的Header組件，能夠不用加後綴，@默認表示目錄src
import Header from '@/components/Header'

//這裏表示Vue實例註冊路由，換句話說有了這行代碼咱們的vue項目纔能有路由分發的效果
Vue.use(Router)

export default new Router({
    routes: [{
　　　　　　　　//這裏隨便修改一下，HelloWorld組件中隨便改改，就不展現出來了
            path: '/hello',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {   //這裏配置一個路徑，當url訪問xxx/head的時候，就會訪問Header組件
            path: '/head',
            name: 'Header',
            component: Header
        }
    ]
})

　　第三步，修改APP.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 這裏使用咱們引入的組件，只要是引入的組件均可以用標籤的形式使用-->
    <Header/>
　　<!-- 這裏就是根據路由匹配到的組件內容，就是router-lingk標籤對應的內容，會在這裏插入進來 -->
    <router-view/>
  </div>
</template>

<script>
//引入Header組件
import Header from '@/components/Header'
export default {
  name: 'App',
  //在當前組件註冊子組件Header，而後再上面的html中才能使用<Header/>
  components:{
    //這裏至關於"Header":Header,當要取的組件名字和組件同樣，能夠用這種簡寫形式
    Header
  }
}
</script>

<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>