luffy前臺

時間 2020-09-14

標籤 luffy 前臺简体版

原文原文鏈接

一. 虛擬環境#

Copy

# 1.傻瓜式安裝node: 
官網下載：https://nodejs.org/zh-cn/

# 2.安裝cnpm， 之後使用淘寶提供的cnpm便可， 速度快。 
''' 查看看裝是否成功版本： cnpm -v 可能出現的問題： 若是出現安裝完畢之後提示‘不是內部或外部命令，也不是可運行的程序’ 解決： 第一步： 查看你看裝完畢之後的路徑是否添加到了環境變量， 沒有添加則添加 C:\Users\yang\AppData\Roaming\npm\cnpm 第二步： 重啓你的命令終端 '''
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 3.安裝vue最新腳手架
""" 查看安裝是否成功， 輸入vue出現提示： vue """
cnpm install -g @vue/cli

# 注：若是二、3步報錯，清除緩存後從新走二、3步
npm cache clean --force

輸入vue出現提示： vuecss

二. 建立項目#

1. 在命令行中輸入命令建立項目#

Copy

# 前提：在目標目錄新建luffy文件夾
cd 創建的luffy文件夾
vue create luffycity  # luffycity是項目名

2. 命令行建立項目流程#

第一步：選擇手動選擇功能 -》 Manually select featureshtml

Copy

Vue CLI v4.4.6
? Please pick a preset:
  default (babel, eslint)   # 默認
> Manually select features  # 手動選擇功能（回車）

第二步：vue

Copy

# 提示： 空格選中， 回車確認
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel       # 默認選中
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router      # 路由
 (*) Vuex        # 狀態管理器
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

第三步：node

Copy

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.?  # ESLint， Babel存放的位置。 存放在 In package.json中通常
  In dedicated config files
> In package.json

第四步：python

Copy

? Save this as a preset for future projects? (y/N) y   # 將此保存爲未來項目的預置(都行)

完成配置：git

3. 使用vue/cli啓動服務，使用圖形化界面建立vue項目#

Copy

# 終端下輸入命令：
vue ui

# 關閉
ctrl+c

Copy

├── luffycity
	├── public/          			 # 項目共有資源
		├── favicon.ico				 # 站點圖標
		└── index.html				 # 主頁
    ├── src/      					 # 項目主應用，開發時的代碼保存
    	├── assets/      			 # 前臺靜態資源總目錄
    		├── css/				 # 自定義css樣式
    			└── global.css		 # 自定義全局樣式
    		├── js/					 # 自定義js樣式
				└── settings.js		 # 自定義配置文件
			└── img/				 # 前臺圖片資源
		├── components/    			 # 小組件目錄
		├── views/  				 # 頁面組件目錄
		├── App.vue	    			 # 入口腳本文件
		├── router    		
			└── index.js			 # 路由腳本文件
		store	    		
			└── index.js			 # 倉庫腳本文件
    ├── vue.config.js	    		 # 項目配置文件
    └── *.*							 # 其餘配置文件

1. 文件修訂：目錄中非配置文件的多餘文件能夠刪除#

2) 應用程序#

Copy

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

2) 路由器/ index.js#

Copy

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3) 主場#

Copy

<template>
    <div class="home"> </div> </template> <script> export default { name: 'home',
        components: {
        },
    }
</script>

四. 全局配置：變量樣式，配置文件#

1. global.css#

Copy

/* 聲明全局樣式和項目的初始化樣式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合併邊框 */
}

2. settings.js#

Copy

export default {
    base_url: 'http://127.0.0.1:8000'
}

3. main.js#

Copy

// 配置全局樣式
import '@/assets/css/global.css'

// 配置全局自定義設置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在全部須要與後臺交互的組件中：this.$settings.base_url + '再拼接具體後臺路由'