VUE搭建步驟

VUE搭建步驟

工具準備

VS code

• 下載包

官網下載

• 將默認英文改爲中文
  Ctrl+Shift+P
  

• 安裝常用插件

Chinese (Simplified) Language Pack for Visual Studio Code
ESLint			代碼格式
Vetur
TortoiseSVN				SVN小烏龜
python

node js

• 下載包
  下載地址：https://nodejs.org/en/download/
  

• 環境變量配置
  配置環境變量後，驗證是否成功

node -v
npm -v

安裝淘寶鏡像，可提升效率 http://npm.taobao.org/

npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm -v 檢查安裝成功

搭建vue項目環境

1. 全局安裝vue-cli

npm install --global vue-cli

2. 進入你的項目目錄，創建一個基於 webpack 模板的新項目: vue init webpack 項目名
   

• 說明：

Vue build ==> 打包方式，回車即可；
Install vue-router ==> 是否要安裝 vue-router，項目中肯定要使用到 所以Y 回車；
Use ESLint to lint your code ==> 是否需要 js 語法檢測 可是代碼更工整 所以 y 回車；
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車；
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車；

3. 進入項目,安裝依賴

cnpm i

4. 啓動服務 npm run dev
   

VUE目錄簡介

• build：構建腳本目錄

1. build.js ==> 生產環境構建腳本；
2. check-versions.js ==> 檢查npm，node.js版本；
3. utils.js ==> 構建相關工具方法；
4. vue-loader.conf.js ==> 配置了css加載器以及編譯css之後自動添加前綴；
5. webpack.base.conf.js ==> webpack基本配置；
6. webpack.dev.conf.js ==> webpack開發環境配置；
7. webpack.prod.conf.js ==> webpack生產環境配置；

• config：項目配置

8. dev.env.js ==> 開發環境變量；
9. index.js ==> 項目配置文件；
10. prod.env.js ==> 生產環境變量；

• node_modules：npm 加載的項目依賴模塊
• src：這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件：

1. assets：資源目錄，放置一些圖片或者公共js、公共css。這裏的資源會被webpack構建；
2. components：組件目錄，我們寫的組件就放在這個目錄裏面；
3. router：前端路由，我們需要配置的路由路徑寫在index.js裏面；
4. App.vue：根組件；
5. main.js：入口js文件；

• static：靜態資源目錄，如圖片、字體等。不會被webpack構建
• index.html：首頁入口文件，可以添加一些 meta 信息等
• package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
• README.md：項目的說明文檔，markdown 格式
• .xxxx文件：這些是一些配置文件，包括語法配置，git配置等

開始我們的第一個vue項目

1. 在components目錄下新建一個views目錄，裏面寫我們的vue組件
   1. 開始我們的第一個組件：
   2. 在views目錄下新建First.vue

<template>
    <div class="first-app">
        {{msg}}
    </div>
</template>

<script>
export default {
  name: 'First',
  data () {
    return {
      msg: 'Welcome to FirstApp'
    }
  }
}
</script>

<style>

</style>

3. 在router目錄下的index.js裏面配置路由路徑

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/first',
      name: 'First',
      component: First
    }
  ]
})

參考博客：

• vue搭建

https://www.cnblogs.com/hellman/p/10985377.html

• 代碼自動格式化

https://blog.csdn.net/weixin_41187842/article/details/90173279