一、项目文件
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.开始使用