vue项目搭建介绍02

目录

  • vue项目搭建介绍02
    • python-pycharm设置:
    • vue创建项目分类:
      • vue-cli构建
    • 自定义构建
      • 基础的vue项目目录:

vue项目搭建介绍02

python-pycharm设置:

https://www.cnblogs.com/pythonywy/p/11432094.html (详情页)

vue创建项目分类:

vue项目搭建介绍02_第1张图片

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组件编写
- 路由配置

vue项目搭建介绍02_第2张图片

创建一个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 // 描述文件

你可能感兴趣的:(vue项目搭建介绍02)