第一发笔记
自己看的同时希望可以帮到其他人.
Vue项目构建的方式我用过两种
1. <script>标签直接引入vue.js
2. 使用vue单文件组件
使用<script>直接引入的方式,这样的项目存在很多缺陷只能使用一些基础的API和局限的功能,一般主要用于初级用户和小型项目.
但是这次只使用第二种方法做示例来分享下vue项目的构建过程.
1.node环境
>node 就直接去这里下载: http://nodejs.cn/
>安装就一直下一步就好了
2.webpack工具
> 安装webpack
cmd 命令 : npm install webpack -g (-g 就是安装到全局 一般我都安装在全局)
>安装完后输入 webpack -v 查看webpack版本 安装好了就能看到版本了
3.vue-cli
>其实很简单 就可以构建好示例项目了
npm install -g vue-cli (安装脚手架)
vue init webpack project-name(创建项目 后面是要创建项目的名字,一路回车就好了)
cd project-name(就是cd到刚才那建立的项目的文件夹里面)
npm install(安装依赖)
npm run dev(是运行这个项目)
4.文件夹结构大概就是这样子
├── 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 // 描述文件