使用webstorm搭建vue-cli項目

時間 2019-11-17

標籤使用 webstorm 搭建 vue cli 項目欄目 Storm 简体版

原文原文鏈接

前言

隨着vue在前端不斷的壯大起來，愈來愈多的前端工程師使用vue了，做爲大型項目的開發，vue-cli是不二之選，因此這篇博客是爲搭建vue-cli所寫，想要搭建vue-cli項目就必須先有git,node.js,webpack,

git地址：https://git-scm.com/html

node.js地址：http://nodejs.cn/前端

本章目標

使用websotm搭建vue-cli項目,前提安裝有git,node.js，webpack等等，不然沒法實現

項目搭建

而後下面這一段可能會比較久

是否選擇vue-router，這裏咱們選擇是，待會後面會用到

是否使用eslint檢查，這裏咱們選擇否

是否選擇單元測試，這裏咱們也選擇否

是否選擇e2e測試，這裏咱們選擇是

是否使用npm包管理器

而後項目就搭建完成了，接下來咱們須要選擇安裝包

假如您的網速比較慢的話，咱們能夠在控制檯中輸入 cnpm install

當全部安裝包下載完成以後咱們就能夠啓動咱們的項目了

在地址攔輸入http://localhost:8088，如何出現以下界面，那麼恭喜你搭建成功了

接下來，咱們對vue-cli中的各個項目進行分析，方便咱們之後的開發中可以更好的進行管理

項目目錄:vue

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|   |-- data                           // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

測試案例

若是項目構建成功以後，那麼接下來就開發咱們本身的項目，在這裏我就作一個小案例，方便你們理解和應用，那麼咱們接下來的這個案例是關於vue路由的使用，首先咱們在src/components目錄下構建三個組件componentA,componentB,componentC,結構以下:

ComponentA代碼以下：

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
  export default {
    name: 'ComponentA',
    data(){
      return{
        msg:'這是組件A',
      }
    }
  }
</script>

<style scoped>
  h1{
    color: red;
  }
</style>

ComponentB代碼以下：

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
  export default {
    name: 'ComponentB',
    data(){
      return{
        msg:'這是組件B',
      }
    }
  }
</script>

<style scoped>
  h1{
    color: yellow;
  }
</style>

ComponetC代碼以下：

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
  export default {
    name: 'ComponentC',
    data(){
      return{
        msg:'這是組件C',
      }
    }
  }
</script>

<style scoped>
  h1{
    color:blue;
  }

</style>

三個組件構建完成以後，咱們修改src/router/index.js，在這裏咱們引入咱們定義的三個組件，實例代碼以下:

import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/HiComponent'
import A from  '@/components/ComponentA'
import B from  '@/components/ComponentB'
import C from  '@/components/ComponentC'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'hi',
      component: Hi,
    },
    {
      path: '/a',
      name: 'A',
      component: A,

    },
    {
      path: '/b',
      name:'B',
      component:B,
    },
    {
      path:'/c',
      name:'C',
      component:C,
    }
  ]
})

咱們修改index.html中的相關內容，代碼以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>project_03</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>
          <a href="#/a">這是組件A</a>
        </li>
        <li><a href="#/b">這是組件B</a></li>
        <li><a href="#/c">這是組件C</a></li>
      </ul>
      <!--router-view主要是構建 SPA (單頁應用) 時，方便渲染你指定路由對應的組件。你能夠 router-view 當作是一個容器，它渲染的組件是你使用 vue-router 指定的。-->
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

最後一步，也是最重要的一步，小編本身也會常常犯這個錯誤,咱們須要修改scr/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'
import router from './router'
Vue.config.productionTip = false

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