VUE系列一：VUE入門：搭建腳手架CLI（新建本身的一個VUE項目）

時間 2020-05-23

標籤 vue 系列入門搭建腳手架 cli 新建本身一個項目简体版

原文原文鏈接

1、VUE腳手架介紹

官方說明：Vue 提供了一個官方的 CLI，爲單頁面應用快速搭建 (SPA) 繁雜的腳手架。它爲現代前端工做流提供了 batteries-included 的構建設置。只須要幾分鐘的時間就能夠運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。html

我的理解：在實際開發中都是經過腳手架快速搭建一個vue項目，固然也能夠使用CDN的方式（具體請看官網）前端

使用腳手架的好處：vue

1. 腳手架是經過webpack搭建的開發環境node

2. 使用ES6語法，在低版本的瀏覽器中會轉換爲ES5去兼容webpack

3. 打包和壓縮js爲一個文件git

4. 項目文件在環境中編譯而不是在瀏覽器中，這樣的話訪問速度更快github

5. 實現頁面自動刷新，即修改實時生效web

二、安裝

1. 腳手架依賴於nodejs，因此咱們要先安裝nodejs，安裝教程請自行百度，安裝完成之後查看node版本和npm版本，保證node版本在6.9以上，npm版本在3.10以上vuex

2. 安裝VUE全局的CLI（命令行工具）vue-cli

安裝命令：npm install --global vue-cli

安裝之後查看安裝的版本：

vue --version

3. 新建一個vue的項目並運行它

新建項目命令：vue init webpack vue-dbspread

進入項目安裝項目所需的依賴

命令：

cd vue-dbspread
npm install

運行項目：

npm run dev

項目運行在8080端口，下面咱們就能夠經過瀏覽器訪問查看效果了

3、項目結構介紹

4、介紹SRC文件流程及根組件App

asset:存放圖片字體

component：存放組件的文件夾

App.vue：根組件

main.js：最重要的一個文件，在裏面導入了VUE和根組件App.vue，由於導入了VUE因此咱們使用VUE的一切東西，因此說他是最重要的

// 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 App from './App' Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ el: '#app', components: { App }, template: '<App/>' })

訪問一個VUE項目的流程：

首先是訪問頁面入口index.html，而後index.html加載main.js，main.js又new了一個vue的對象，而後經過vue對象加載了根組件App.vue，從而加載了根組件裏面的內容在頁面上顯示。如下是相關文件：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-dbspread</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

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' //導入vue
import App from './App' //導入根組件App.vue
 Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ //實例化一個vue對象
  el: '#app', //index.html的根元素app
  components: { App },//註冊根組件App.vue才能使用
  template: '<App/>'//VUE模板使用，能夠是組件、html標籤等
})

App.vue

// 1. 模板：html結構 有且只有一個根標籤
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/> <!--使用組件HelloWorld  -->
  </div>
</template>

//2. 行爲：處理邏輯
<script>
//導入組件HelloWorld.vue
import HelloWorld from './components/HelloWorld' export default { name: 'App',//組件App.vue的名字
 components: { HelloWorld //註冊組件HelloWorld才能使用
 } } </script>

//3. 樣式：解決樣式
<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>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank"
        > Core Docs </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank"
        > Forum </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank"
        > Community Chat </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"
        > Twitter </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank"
        > Docs for This Template </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank"
        > vue-router </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank"
        > vuex </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank"
        > vue-loader </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank"
        > awesome-vue </a>
      </li>
    </ul>
  </div>
</template>

<script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

一個VUE組件的結構說明，全部的組件都包含如下三個部分：

App.vue

// 1. 模板：html結構
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

//2. 行爲：處理邏輯
<script>
import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld } } </script>

//3. 樣式：解決樣式
<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>