Vue学习笔记0独立项目搭建

前言

搭建 Vue+Webpack 项目，使用 vue-cli 搭建项目。

准备

vue 独立项目依赖 node 的 npm 包管理器，所以需要先安装 node。
相关的 npm 常用命令文章：

• Npm- 常用命令，点击访问
• Vue 官方文档，点击访问

<!–more–>

步骤

安装 vue-cli 脚手架

npm install -g vue-cli

选择 webpack 模板

# vue init webpack 项目名称
vue init webpack lx-note-front

等待命令执行完毕。

由以上界面我们可以看到，要想运行该项目，可以执行命令：cd lx-note-front 打开项目目录，命令执行完成后的项目结构：

运行项目

执行命令 npm run dev 命令启动该项目，项目启动效果如下：

出现以上界面说明我们已经搭建成功。

项目目录讲解

• build: webpack 配置相关；

  • build.js: npm run build 所执行的脚本；
  • check-versions.js: 检查 npm 和 node 的版本；
  • utils.js: 工具方法，主要用于生成 CSSLoader 和 styleLoader 配置；
  • vue-loader.conf.js: vueloader 的配置信息；
  • webpack.base.conf.js: dev 和 prod 的公共配置；
  • webpack.dev.conf.js: dev 环境的配置；
  • webpack.prod.conf.js: prod 环境的配置；

• config: 环境变量配置；

  • dev.env.js: dev 环境变量配置；
  • index.js dev 和 prod 环境的一些基本配置；
  • prod.env.js: prod 环境变量配置；
• node_modules: npm 安装的依赖代码库；
• src: 项目源码；

• static: 存放 css、js 等静态资源；

  • .gitkeep: 使这个空文件也能够提交到版本库；
• .babbelrc: babel 相关配置（babel：将 ES6 语法转换成大多数浏览器可以识别的 ES5 语法）；
• .editorconfig: 编辑器的配置，修改编码、缩进等；
• .eslintignore: 设置忽略语法检查的目录文件；
• .eslintrc.js: eslint 的配置文件，管理和检测 js 代码风格的工具；
• .gitignore: git 不纳入版本，需要忽略的文件；
• .postcssrc.js: 用于添加浏览器私缀（兼容不同浏览器的 css 样式）；
• index.html: 入口 html 文件；
• package-lock.json: 是锁定安装时的包的版本号，并且需要上传到 git，用以保证开发人员的开发环境一致；
• package.json: 项目的配置文件，项目描述、命令、依赖插件等；
• README.md: 项目描述等主要文档；

webpack 打包 vue 项目

webpack 是什么？

webpack 是个模块打包器，能够根据 html、css、js、图片等文件之间的依赖关系将所有的模块打包起来。

# 重新生成打包 js
webpack --display-modules --display-chunks --config webpack.config.js
# 实时自动打包 webpack -w
webpack --watch
# 显示异常信息
webpack --display-error-details
# 压缩混淆脚本
webpack -p 
# 提供 source map，方便调式代码
webpack -d

webpack vue 项目中安装 Bootstrap

Bootstrap 依赖 jQuery，因此引入 Bootstrap 之前需要引入 jQuery，jQuery 依赖 popper.js：
安装过程：

1. 安装 popper
2. 安装 jquery
3. 安装 bootstrap

引入 popper 依赖

npm install popper.js --save-dev

引入 jQuery 依赖

npm install jquery
# 或者限定 jQuery 的版本
npm install jquery@3.3.1 --save-dev

引入 Bootstrap 依赖

npm install bootstrap@3.4.1 --save-dev

引入 jquery 和 bootstrap

1. 在 build 目录下的 webpack.base.conf.js 中加入：

const webpack = require('webpack')

1. 配置 jQuery：在上述文件中找到 module.exports 找到 plugins，没有的话请创建，格式如下：

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'windows.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]

在 main.js 中引入 jQuery 和 bootstrap

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

完了之后可以添加 bootstrap 的样式及带有 $ 符号的方法可以测试是否引入成功。

引入其他插件

npm install bootstrap-table@1.14.2 --save-dev
npm install admin-lte@2.4.5 --save-dev
npm install bootstrap-dialog@1.34.6 --save-dev
npm install bootstrapvalidator@0.5.4 --save-dev

<center> 如果喜欢的话，欢迎关注 weyoung 公众号 …</center>
 
<div align=center>

</div>