创建项目

在命令行中敲命令

  1. # 全局安装 vue-cli
  2. $ npm install --global vue-cli
  3. # 创建一个基于 webpack 模板的新项目
  4. $ vue init webpack your-project-name
  5. n
  6. y
  7. n
  8. y
  9. # 安装依赖，走你
  10. $ npm install
  11. # 进入项目
  12. $ cd your-project-name
  13. # 开发版本打包并运行
  14. $ npm run dev
  15. # 线上环境整个项目打包  生成 dist 可以直接部署到服务器上的文件夹
  16. npm run build

image.png

项目构成

对 vue-cli 生成的项目的文件夹的认识

  • build 和 config 文件夹是 webpack 的配置
  • node_modules 是 npm install 的所有的项目依赖包
  • src 是我们写的所有的代码存放的地方
  • static 里面只有一个 .gitkeep 文件，这个文件是为了使 static 文件夹在 git 提交的时候也能提交上去才创建的文件，因为默认的空文件在 git 提交的时候是会被忽略掉不被提交的
  • .babelrc 编译依赖 babel 的配置
  • .editorconfig 对编辑器的一些配置
  • .eslintignore 忽略语法检查的目录文件
  • .eslintrc.js eslint 的配置文件
  • .gitignore git 仓库忽略掉的文件或是目录
  • index.html 这个就是入口 html 文件，这个文件里面没有其他的 css js 资源引入的代码，这些资源会在 webpack 编译的时候自动的引入这个 html 文件中
  • package.json 项目的配置文件，他一般是用来描述一个项目的，前面的都是在使用 vue-cli 初始化项目模板的时候填入的一些信息，里面的 script 表示的是可以执行夫人一些命令，比如说执行了 npm run dev 就是执行了 script -> dev 后面的代码命令，dependencies 是这个项目的一些生产环境的依赖，devDependencies 是开发环境的依赖
  • README.md 这个就是项目的一些描述文件

    了解生成的项目是如何运行的

  • 先看项目的入口文件 index.html

项目的静态资源 css js 是可以通过 webpack 编译动态的插入到这个页面中的，然接下来看这个页面的
DOm 结构，在 body 下面有一个 app 标签，这个标签他不是 html 原生的，它实际上的 VueJS 的一个组件

  • 页面的入口 js 是 src -> main.js

首先在顶部引入一个 vue 和 /APP 组件
之后在下面实例化一个 Vue
el : body，意思就是将这个实例挂载到 body 上
compents 就是注册了一个模板，后面的 { APP } 是 ES6 的简写，写成 ES5 的话就是 { APP:APP } ，可以通过这样的 ES6 的写法来简化代码
现在知道了这个 Vue 依赖了 APP 这个模板

  • 接下来看 src -> App.vue 组件

每一个 vue 组件分为三个部分
template:html模板
script:脚本
style:样式
在 template 里面可以看到还有 一个 HelloWorld 标签，这个标签就是在下面的 script 里面引入的 ./components/HelloWorld 文件，并且将这个文件作为模板使用 export default 作为里面的 components 值的对象中的参数导出
需要注意的是必须在下面的 components 里面注册这个 HelloWorld 才能在上面的 template 中使用 HelloWorld 这个标签，否则是不行的

  • 接着看下在 APP.vue 中引入的 components/HelloWorld 组件

里面也是一个组件的基本构成
template script style

  1. 创建一个组件的方法
  • 首先新建一个 .vue 文件，之后写三个标签模块 template script style

    了解 webpack 是如何进行打包的

webpack 是当前最火的前端构建工具

开发时的 webpack 配置

  • 首先从 package.json 配置文件中的 script 里面的 dev 后面的面命令开始分析，webpack 是如何进行编译的

可以看到 npm run dev 执行的命令其实就是 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 这一句，运行的是 build 目录下的 webpack.dev.conf.js 文件

  • 在分析完整个的 webpack 配置之后开始项目的实战，首先通过设计稿分析项目需求，之后在项目中新建一个 resource 文件夹来存放一些图片资源

[图片上传中…(image.png-ae6386-1522575568823-0)]