vue-cli和webpack和一些項目文件介紹

時間  2019-11-06
標籤 vue cli webpack 一些 項目 文件 介紹 简体版
原文   原文鏈接

vue-cli是vue的腳手架,負責協助編寫基礎代碼
官網地址css

檢查node並安裝vue-cli

# 確保node版本在4以上
node -v          
v6.9.5

# 安裝vue-cli,npm全局安裝
npm install -g vue-cli

初始化vue項目

# 使用vue-cli初始化項目
vue init webpack sell(課程項目叫sell)

#--------------------------------------
This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack#1.0 sell

? Project name sell
? Project description A Vue.js project
? Author test
? Vue build standalone
? Install vue-router? No #爲了後面的手動安裝
? Use ESLint to lint your code? Yes #由於要用ESLint檢查代碼
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "sell".

   To get started:

     cd sell ## 這裏已經提示了怎麼安裝相關模塊和啓動dev服務器了
     npm install
     npm run dev

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

安裝須要用到的模塊並啓動dev服務器

cd sell
sudo npm install #根據package.json來安裝須要的模塊
npm run dev ##運行開發測試服務器,會自動打開瀏覽器,而且自動顯示測試頁面

clipboard.png

參考連接:vue-cli 入門html

babelrc

這是babel的配置文件vue

主要功能:node

  1. 編譯es6轉義爲es5webpack

  2. 通常用2個插件es2015,stage-2,transfer-runtimegit

參考連接:babel6 入門es6

eslintrc.js

這是ESLint的配置文件,至於爲何用ESLint的話,就是爲了自動檢查代碼,保持一致的代碼風格,從而保證代碼質量.github

這裏須要注意的是,在eslintrc.js文件裏面:rules是自定義的檢查規則,能夠覆蓋默認的檢查規則,例如要加分號,函數要加空格,這個跟代碼風格有關web

'rules': {
   // allow paren-less arrow functions
   'arrow-parens': 0,
   // allow async-await
   'generator-star-spacing': 0,
   // allow debugger during development
   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
   'space-before-function-paren': 0, //函數參數前面要加空格
   'space-before-blocks': 0, //函數塊前面要加空格
   'semi': 0 //分號檢查
 }

index.html

  • 默認是沒有meta的,須要本身添加,添加的部分都是一些經常使用的移動端使用的vue-router

  • 項目使用了reset.css來保持瀏覽器css屬性的純潔,科普信息(裏面介紹了normalize和reset):來，讓咱們談一談 Normalize.css

  • index.html自己並無什麼特別的東西,只有一個id爲app的div,webpack會幫咱們將其餘東西打包並插入到這個文件裏面去,id爲app的div是爲了vue的一個父組件定位,也能夠不寫在裏面

  • webpack打包的時候會生成一個app.js,裏面包含了全部須要的css,圖片,js,參考:webpack2入門,不過正式環境和測試環境是不同的,正式環境會分拆和壓縮和轉譯等,作了至關多的操做來配合正式環境使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sell</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

main.js

  • 這是vue-cli項目使用的一個主js文件,這是在webpack配置的時候定義的,是主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模塊(npm的node_module裏面)
import App from './App' // 導入當前目錄的App文件爲App

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //vue父實例的掛載點
  template: '<App/>', // 主組件的模板
  components: { App } // 使用導入的App,es6對象寫法
})

App其實就是App.vue

主要的步驟:

  1. 導入模塊或者導入文件以後,才能被使用,這種導入方式是es6的模塊導入方式

  2. vue初始化實例的方式,而且註冊組件來使用

/* eslint-disable no-new */是elint的特殊規則的另一種寫法,這個意思是能夠單獨new而不用賦值,這是爲了適應vue的初始化vue實例的寫法

參考引用:

  1. webpack2入門

App.vue

這是vue的特別的文件:

  • 完整語法高亮

    • 對於ide來講,在html插入其餘形式代碼會警告的,因此改爲這樣就沒事了,並且webstorm2017已經支持vue了,更大程度的方便寫代碼

  • CommonJS 模塊

    • vue-cli 裏使用了 vue-loader，vue-loader會將 *.vue 的文件轉換成 CommonJS 模塊

  • 組件化的 CSS

    • 既然可以單獨一個文件,那麼就至關於單獨一個一個組件一個文件或者文件夾了

文件結構:

  • template

  • script

  • css

<!--html模板,template語法-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--自定義組件hello-->
    <hello></hello> 
  </div>
</template>
<!-- js語法-->
<script>
import Hello from './components/Hello' // 導入Hello組件

export default { // 導出默認輸出一個對象
  name: 'app', // 導出後的name屬性
  components: { // 導出子組件Hello到當前頁面使用
    Hello
  }
}
</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>

主要步驟:

  1. 導入Hello組件,而後調用

  2. 使用vue的components語法註冊組件Hello,而後導出,這樣當前頁面就可以使用這個組件

  3. 上面這些內容會所有經過vue-loader解析,而後轉化爲vue可以使用的對象供vue使用

  4. 這樣跟前面的main.js一塊兒理解,main.js的components 可以使用APP就是由於這個緣由,父組件APP裏面包含了子組件Hello

引用參考:

Hello.vue

  • 這個vue文件跟以前的App.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://gitter.im/vuejs/vue" target="_blank">Gitter 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: 'hello', // 子組件的名字
  data () { // vue傳入組件的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>

webpack

其餘部分參考::webpack2入門

備註:

  1. 在vue-cli默認沒有安裝stylus插件的時候,須要先安裝，

    `sudo npm install stylus --save-dev`

  2. vue-loader會利用postcss來自動補全瀏覽器的css差別,因此寫一次css就能夠支持其餘瀏覽器差別

  3. [Vue warn]: Do not use built-in or reserved HTML elements as component id: header 不能使用header做爲組件名字,如今改爲使用v-header

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程