vue项目搭建介绍02

vue项目搭建介绍02

python-pycharm设置：

https://www.cnblogs.com/pythonywy/p/11432094.html （详情页）

vue创建项目分类：

1.官方推荐的构建工具主要有webpack和browserify，这里我更推荐大家使用webpack进行构建。

2.同时除了构建工具，我们还需要用到构建方法，比如我们可以使用vue-cli脚手架来自动生成vue项目的基础目录文件，

3.当然我们也可以从零开始进行自定义构建

vue-cli构建

如果你使用vue-cli脚手架来构建vue项目，那么你只需敲击下面5行命令即可生成一个简单的vue项目（前提安装node.js）：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

自定义构建

相比vue-cli构建，自定义构建就显得灵活得多，但是它需要你了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步：

- 文件/文件夹创建
- package.json文件创建
- webpack配置文件创建
- 入口文件创建
- vue组件编写
- 路由配置

创建一个package.json文件：

npm init -y

其他配置： https://www.cnblogs.com/luozhihao/p/7082736.html#3723403 （详情页）

基础的vue项目目录:

├── build // webpack/node配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config // 环境配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件
├── src // 静态资源文件
│   ├── assets
│   │    └── logo.png
│   ├── components 
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
├── package.json // 包管理文件
└── README.md // 描述文件