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 // 描述文件