一、項目檔案
1、完整版：
README.md
指令檔案。
package-lock.json
預設配置檔案，自帶的包工具。
package.json
項目配置檔案，包含項目基本資訊、安裝的第三方包工具版本資訊等。
index.html
項目的網頁入口檔案，預設設定，不需要操作。
.postcssrc.js
配置解析檔案的，不需要操作。
.gitignore
寫字尾名的，不需要操作。
.editorconfig
不需要操作。
static
靜态資源管理檔案，一般用來放網頁中靜态的css或靜态的圖檔，就可以用路徑直接拿。
src
開發目錄。
——它裡邊的 main.js 檔案是 vue 項目的入口，裡邊會執行個體化全局的vue 對象；
——App.vue 裡邊包含template 模闆，目前模闆的 js，目前模闆的 css。
node_modules
項目環境裡邊安裝的所有依賴。也就是pakeage.json裡邊的所有檔案。
conifg
配置檔案；完整版才有。
——config/index.js 裡邊配置伺服器端口号。
build
打封包件。
開發一般隻動 static 和 src。
2、簡單版：
注意：
1、簡單版的項目中，沒有預設設定 @代表src 目錄，如果要配置，在
webpack.config.js
裡邊的
resolve.alias
裡邊添加
'@':path.resolve('src')
；
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
},
extensions: ['*', '.js', '.vue', '.json']
},
2、配置伺服器端口号，在
webpack.config.js
檔案裡邊的
resolve.devServer
裡邊添加
port
和
host
。注意，如果要修改host，需要先在windows的 hosts 檔案裡邊添加域名。
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
port: 8000
},
也可以在
pakeage.json
檔案下的
"scripts"."dev"
後邊添加
--port 8000
二、更改主模闆
在src 檔案裡邊建立vue檔案：
然後在 main.js 檔案裡邊引入該模闆：
三、在vue中使用less
1、安裝less、less-loader：
cnpm install --save-dev less less-loader
上邊的指令是将less 和less-loader安裝到package.json 裡邊的devDependencies中，因為裝依賴是根據devDependencies裡邊的配置來裝的，這樣可以友善将項目拿到另一個項目中時，直接裝依賴就可以使用；
如果不寫“-dev”，是安裝到package.json 裡邊的dependencies中。
2、在webpack.config.js 裡邊配置less 的環境：
在module.rules 裡邊添加：
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader',
],
}
3、使用less
<template>
<div id="todoList"></div>
</template>
<script>
export default {
name: "todoList",
data() {
return {};
},
};
</script>
<style lang="less">
@weidth: 1180px;
@height: 50px;
#todoList {
width: @weidth;
min-height: @height;
}
</style>
四、在vue中使用 base64
1、在項目根目錄下安裝
cnpm install --save-dev js-base64
2、在項目檔案中引入（在模闆的script标簽中引入）
//引入base64 加密解密子產品
let Base64=require("js-base64").Base64;
3.開始使用