vue項(xiàng)目環(huán)境搭建?啟動(dòng)?移植操作示例及目錄結(jié)構(gòu)分析

更新時(shí)間：2022年04月18日 13:01:21 作者：Jeff的技術(shù)棧

這篇文章主要介紹了vue項(xiàng)目環(huán)境搭建、啟動(dòng)、項(xiàng)目移植、項(xiàng)目目錄結(jié)構(gòu)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪

項(xiàng)目搭建

下載node

官網(wǎng)下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

安裝cnpm，用淘寶源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

檢測(cè)是否安裝成功：cnpm -version

安裝腳手架：

cnpm install -g @vue/cli

清空緩存處理：

npm cache clean --force

項(xiàng)目創(chuàng)建

創(chuàng)建項(xiàng)目：

vue create 項(xiàng)目名
// 要提前進(jìn)入目標(biāo)目錄(項(xiàng)目應(yīng)該創(chuàng)建在哪個(gè)目錄下)
// 選擇自定義方式創(chuàng)建項(xiàng)目，選取Router, Vuex插件

一步一步的選擇：

babel:把ES6的語(yǔ)法自動(dòng)轉(zhuǎn)換成ES5。瀏覽器對(duì)ES5兼容最好

TypeScript:TS的環(huán)境

Progressive:前臺(tái)優(yōu)化機(jī)制，有很多的插件

Router：前臺(tái)路由

Vuex：前臺(tái)倉(cāng)庫(kù)，相當(dāng)于全局單例，完成個(gè)組件間傳參的。

在一個(gè)地方給一個(gè)對(duì)象賦值，在任何地方拿到的值都是一樣的

CSS Pre-processors:預(yù)編譯器 less sass css預(yù)編譯器，最終轉(zhuǎn)換成原生的css，瀏覽器才能識(shí)別。

我們用原生CSS，所以這個(gè)不用安裝

Linter / Formatter:代碼規(guī)范。如果代碼寫(xiě)的不規(guī)范直接報(bào)錯(cuò)。前端工程師會(huì)安裝，因?yàn)榇a規(guī)范。

Unit Testing:測(cè)試用的

E2E Testing:測(cè)試用的

項(xiàng)目啟動(dòng)停止

cnpm run serve / ctrl+c
// 要提前進(jìn)入項(xiàng)目根目錄

推薦使用pycharm啟動(dòng)項(xiàng)目：

創(chuàng)建啟動(dòng)方式npm

cnpm install 重新構(gòu)建項(xiàng)目依賴環(huán)境

項(xiàng)目目錄結(jié)構(gòu)分析

├── v-proj
|	├── node_modules  	// 當(dāng)前項(xiàng)目所有依賴，一般不可以移植給其他電腦環(huán)境
|	├── public			
|	|	├── favicon.ico	// 標(biāo)簽圖標(biāo)
|	|	└── index.html	// 當(dāng)前項(xiàng)目唯一的頁(yè)面
|	├── src
|	|	├── assets		// 靜態(tài)資源img、css、js
|	|	├── components	// 小組件
|	|	├── views		// 頁(yè)面組件
|	|	├── App.vue		// 根組件
|	|	├── main.js		// 全局腳本文件（項(xiàng)目的入口）
|	|	├── router
|	|	|	└── index.js// 路由腳本文件（配置路由 url鏈接 與 頁(yè)面組件的映射關(guān)系）
|	|	└── store	
|	|	|	└── index.js// 倉(cāng)庫(kù)腳本文件（vuex插件的配置文件，數(shù)據(jù)倉(cāng)庫(kù)）
|	├── README.md
└	└── package.json等配置文件

全局腳本配置

1）main.js是項(xiàng)目的入口文件

2）new Vue()就是創(chuàng)建根組件，用render讀取一個(gè).vue文件，$mount渲染替換index.html中的占位

3）項(xiàng)目所依賴的環(huán)境，比如：vue環(huán)境、路由環(huán)境、倉(cāng)庫(kù)環(huán)境、第三方環(huán)境、自定義環(huán)境都是在main.js中完成

import Vue from 'vue'  // 加載vue環(huán)境
import App from './App.vue'  // 加載根組件
import router from './router'  // 加載路由環(huán)境
import store from './store'  // 加載數(shù)據(jù)倉(cāng)庫(kù)環(huán)境
Vue.config.productionTip = false;  // tip小提示
import FirstCP from './views/FirstCP'
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: function (readVueFn) {
        return readVueFn(FirstCP);  // 讀取FirstCP.vue替換index.html中的占位
    }
});

index.html詳細(xì)介紹

單頁(yè)面：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>  // 占位的。其他的頁(yè)面來(lái)替換它，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
</body>
</html>

main.js入口文件詳細(xì)

import Vue from 'vue'
import App from './App.vue'  // 根組件
import router from './router'
import store from './store'
Vue.config.productionTip = false;
new Vue({
    router,  // router: router,   簡(jiǎn)寫(xiě)
    store,  //  store: store,     簡(jiǎn)寫(xiě)
    render: h => h(App)  // 箭頭函數(shù)  擴(kuò)展開(kāi)：render: function (readVueFn) {
                                                    // return readVueFn(FirstCP);
                                                    // }
}).$mount('#app');//掛載點(diǎn)，等價(jià)與:  el: '#app',

1）main.js是項(xiàng)目的入口文件

2）new Vue()就是創(chuàng)建根組件，用render讀取一個(gè).vue文件，$mount渲染替換index.html中的占位

App.vue跟組件介紹

<!--
1）App.vue是項(xiàng)目的根組件，是唯一由main.js加載渲染的組件，就是替換index.html頁(yè)面中的<div id="app"></div>的占位標(biāo)簽
2）實(shí)際開(kāi)發(fā)中App.vue文件中，只需要書(shū)寫(xiě)下方五行代碼即可（可以額外增加其他代碼）
3）router-view是一個(gè)占位標(biāo)簽，由router插件控制，可以在router的配置文件中進(jìn)行配置
4）router-view就是根據(jù)router在index.js中配置的路由關(guān)系被 指定路徑 匹配 指定頁(yè)面組件 渲染
    router-view或被不同的頁(yè)面組件替換，就形成了頁(yè)面跳轉(zhuǎn)
-->
<template>
    <div id="app">
        <!-- 前臺(tái)路由占位標(biāo)簽，末尾的/代表單標(biāo)簽的結(jié)束 -->
        <router-view />
    </div>
</template>
<style>
    body {
        margin: 0;
    }
</style>

router-index.js 路由介紹

import Vue from 'vue'
import VueRouter from 'vue-router'

// import 別名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'
import Second from '../views/Second'
Vue.use(VueRouter);

// 路由配置
// 1）當(dāng)用戶在瀏覽器中訪問(wèn)的路由是 / ，router插件就會(huì)加載 Home.vue文件，同理 /about 就是 About.vue文件
// 2）將加載的 Home.vue文件 或者 About.vue文件，去替換App.vue文件中的 <router-view />占位符
// 3）用redirect配置來(lái)實(shí)現(xiàn)路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    },
    {
        path: '/second',
        name: 'Second',
        component: Second
    }
];
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});
export default router

以上就是vue項(xiàng)目環(huán)境搭建啟動(dòng) 移植操作示例及目錄結(jié)構(gòu)分析的詳細(xì)內(nèi)容，更多關(guān)于vue項(xiàng)目環(huán)境搭建啟動(dòng) 移植目錄結(jié)構(gòu)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: