vue cli 詳細分析

2021-09-24 05:31:03 字數 2563 閱讀 1705

vue-lic 是 vue 官方提供的腳手架工具,預設搭建好乙個專案的基本架子,我們只需要在此基礎上進行相應的修改即可。

注意:安裝 vue-cli 前需要事先配置好 node 環境

npm install -g vue-cli

//如果是 mac 電 sudo表示以管理員的許可權

sudo install -g vue-cli

用法: vue init template-name:

. webpack //經常使用到的就是 webpack

. webpack-****** // 乙個簡單webpack+vue-loader的模板,不包含其他功能。

. browserify // 乙個全面的browserify+vueify 的模板,功能包括熱載入,linting,單元檢測。

. browserify-****** // 乙個簡單browserify+vueify的模板,不包含其他功能。

. pwa // 基於webpack模板的vue-cli的pwa模板

. ****** // 乙個最簡單的單頁應用模板

//建立

vue init webpack demo

建立後需要進行配置:

|-- build                            // 專案構建(webpack)相關**

| |-- build.js // 生產環境構建**

| |-- check-version.js // 檢查node、npm等版本

| |-- utils.js // 構建工具相關

| |-- vue-loader.conf.js // webpack loader配置

| |-- 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所有元件

| |-- router // vue的路由管理

| |-- main.js // 程式入口檔案,載入各種公共元件

|-- static // 靜態檔案,比如一些,json資料等

|-- test // 測試檔案

| |-- e2e // e2e 測試

| |-- unit // 單元測試

|-- .babelrc // es6語法編譯配置

|-- .editorconfig // 定義**格式

|-- .eslintignore // eslint檢測**忽略的檔案(夾)

|-- .eslintrc.js // 定義eslint的plugins,extends,rules

|-- .gitignore // git上傳需要忽略的檔案格式

|-- .postcsssrc // postcss配置檔案

|-- readme.md // 專案說明,markdown文件

|-- index.html // 訪問的頁面

|-- package.json // 專案基本資訊,包依賴資訊等

執行結果:

const詳細分析

最近在分析 linux 驅動的過程過程中遇到一些關於 const 的使用,現在在這裡詳細剖析一下 一,const int p 首先分析一下幾個概念 1 p 是乙個指標變數,因而它也是乙個變數,所謂變數就有變數的位址和變數的值,而這裡 p變數的值就是乙個位址,該位址下存放的是乙個整數,p的值等於這個整...

約數詳細分析

約數詳細分析 我們先來認識一下約數 約數分正約數和負約數兩種,我們一般只討論正約數。也就是說,接下來所提的約數,只考慮正約數。如果有乙個數k,滿足k n,那麼k就是n 的約數 因數 n是k的倍數。求乙個數的約數是資訊學競賽裡乙個基礎的不能再基礎的問題。如果只求乙個數,最容易想到的就是列舉。當然列舉也...

LiveData詳細分析

目錄介紹 感知生命週期 自動解除資料訂閱 2.1 具有很明顯的優點 不會發生記憶體洩露 不會再產生由於activity處於stop狀態而引起的崩潰 不需要再解決生命週期帶來的問題 實時資料重新整理 解決configuration change問題 資料共享 2.2 細節點補充4.1 單獨使用live...