vue项目打包
 
一、终端运行命令 npm run build
 
二、打包成功的标志与项目的改变，如下图：
 
 
 
3、点击index.html，通过浏览器运行，出现以下报错，如图：
 
 
四、那么应该如何修改呢？
 具体步骤如下：
 1、查看package.js文件的scripts命令
 2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件
 3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
 4、终端运行 npm run build 即可。
 
此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
 
五、温馨提示
 
更多博文，请关注：xssy5431 【小拾岁月】
 
扫码：
 
 
 

 
Vue框架使用
 
vue简介
MVVM的介绍
vue项目步骤
vue项目目录详解
运行vue可以自动打开浏览器
如何使用less写样式
 

 
vue简介
 
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
 
MVVM的介绍
 
MVVM，一种更好的UI模式解决方案;
 
MVC
 M: Model 数据模型（专门用来操作数据，数据的CRUD）
 V：View 视图（对于前端来说，就是页面）
 C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）
MVVM组成
 MVVM ===> M / V / VM
 M：model数据模型
 V：view视图
 VM：ViewModel 视图模型
 
vue项目步骤
 
一、安装node环境
 
 
下载地址：https://nodejs.org/en/
 
 
检查是否安装成功;如果能够成功输出版本号，就说明我们安装node环境成功；
 
 
 
可以使用淘宝镜像提高效率：http://npm.taobao.org/
 
输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。
 
 检查是否安装成功：
 
 二、搭建vue项目环境
 
 
1、全局安装vue-vli
 npm install --g vue-cli
 
 
2、进入项目目录，创建一个基于webpack模板的新项目: vue init webpack 项目名
 
 
3、切换到项目，进入项目 cd 项目名，然后在安装依赖 cnpm install
 
 安装成功后，项目文件夹中回多出一个目录 node_modules
 
 4、启动项目npm run dev
 项目启动成功：
 
 
vue项目目录详解
 
 
build：构建脚本目录
 
1）build.js ==> 生产环境构建脚本；
 
2）check-versions.js ==> 检查npm，node.js版本；
 
3）utils.js ==> 构建相关工具方法；
 
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
 
5）webpack.base.conf.js ==> webpack基本配置；
 
6）webpack.dev.conf.js ==> webpack开发环境配置；
 
7）webpack.prod.conf.js ==> webpack生产环境配置；
 
 
-config：项目配置
 
1）dev.env.js ==> 开发环境变量；
 
2）index.js ==> 项目配置文件；
 
3）prod.env.js ==> 生产环境变量；
 
 
node_modules：npm 加载的项目依赖模块
 
 
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
 
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
 
2）components：组件目录，我们写的组件就放在这个目录里面；
 
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
 
4）App.vue：根组件；
 
5）main.js：入口js文件；
 
 
static：静态资源目录，如图片、字体等。不会被webpack构建
 
 
index.html：首页入口文件，可以添加一些 meta 信息等；
 
 
package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
 
 
README.md：项目的说明文档，markdown 格式
 
 
.xxxx文件：这些是一些配置文件，包括语法配置，git配置等；
 
运行vue可以自动打开浏览器
 
解决vue不能自动打开浏览器的问题：当我们启动项目npm run dev ,开始运行
 ，命令行提示我们运行成功，但是浏览器没有打开，只能自己手动输入
 解决：
 
打开config ==> index.js
 
module.exports配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
 
Ctrl+C,然后我们重启一下，就能自动打开浏览器了
 
 
如何使用less写样式
 
1、先安装less依赖: **npm install less less-loader --save **
 
 2、安装成功后，可以在package.json里面看到，多增加了两个模块；
 
 3、然后在vue文件里面编写样式：
 
 写的不好或有错误的地方，接受请教~!

Vue 搭建移动端 h5 项目步骤
 
简介
 
最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目，没有整体的思路，于是我就写了这个步骤。
 
准备阶段
 
 
确定项目 ui 框架
 
现阶段比较好的 Vue 移动端 ui 框架：vant ， vux， cube-ui，Mint-UI，Muse UI，NutUI 等。
 
 
选择css预处理样式语言，（vue-cli 里选择）
 
less，sass，stylus都可以，vue-cli 3 后的版本对应的webpack 的loader都是配置好的，只需下载对应的包就好了。使用建议：一般选择的css预处理语言和 ui 框架的预处理语言一致为好，类如vant使用的是less，则项目中优先使用less。
 
 
是否需要集成 eslint，stylelint，prettier，git hooks，lint-staged，一般建议eslint是必要的，其他不做强制要求，这些都是后面可以自己手动添加的。
 
 
使用 Vue-cli 生成的项目，集成 vuex ， vue-router，css预处理语言，eslint等。
 
项目目录
 
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    ├── components
    ├── main.js
    ├── router
    ├── store
    └── views
 
 
样式和适配
 
 
重置样式
 
一般是需要加载reset.css 或者normalize.css，用来重置和保护各大浏览器的样式。一般建议使用normalize.css。
 
 
安装并导入准备阶段选择好的 ui 框架
 
 
选择移动端适配方案
 
现在主流的适配方案是rem和vw，老项目用的rem比较多，随着时间的推移，vw的适配方案会占优势。一般建议新项目直接上vw适配方案。
 
适配方案链接：
 
rem 实现移动端适配
 
vw 实现移动端适配
 
 
全局样式定义。全局样式变量定义：颜色，字号，宽度等
 
 
工具插件的添加
 
 
请求工具的添加（配合环境变量 .env 配置设置 baseUrl，后文有提到）
 
主流的请求库：
 
axios（支持 React Native，Node，浏览器）
 
fly.js（支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器）。
 
一般需要自己根据项目封装，常见的需要封装请求拦截器和响应拦截器。
 
 
vuex全局状态的添加，涉及到登陆，全局 ui 状态管理等。
 
 
Vue插件的添加，过滤器，混入，钩子等。
 
 
添加vue-router 的导航守卫。 可选
 
 
fastclick 解决移动端 300 毫秒延迟问题
 
 
vconsole 方便移动端 debug
 
 
其他工具的添加，时间处理，深拷贝，函数节流防抖等。
 
 
项目 eslint，stylelint ，prettier 的配置
 
 
配置.eslintrc.js
 
一般继承@vue/eslint-config-standard这个插件的，具体的规则需要在rules字段定义
 
 
配置.stylelintrc， 可选
 
一般继承stylelint-config-standard这个插件的，具体的规则需要在rules字段定义
 
 
配置.prettierrc.js， 可选
 
一般配置
 
module.exports = {
  trailingComma: 'none',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: true,
  arrowParens: 'avoid'
}
 
 
项目命令和环境变量配置
 
 
根据 webpack 的模式定义环境变量文件，模式可以自己定义
 
.env.dev  #测试环境变量文件，不打包的话不用配置
.env.development #开发环境变量文件
.env.production #生产环境变量文件
 
Vue 项目环境变量以VUE_APP开头，特殊项目变量除外。例如：
 
.env.development文件
 
NODE_ENV=development
VUE_APP_BASE_API=https://api.ex.com
VUE_CLI_BABEL_TRANSPILE_MODULES=true
 
 
根据上面定义的模式配置 npm 脚本
 
package.json 文件
 
"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build:prod": "vue-cli-service build --mode production",
    "build:dev": "vue-cli-service build --mode dev"
}
 
 
gitHooks lint-staged 的配置， 可选
 
 
vue.config.js（webpack） 的配置
 
 
deServer 的配置,
 
常见的端口，代理，是否打开浏览器等。
 
 
webpack 的配置
 
一般需要配置gzip和drop_console等。
 
 
alias 的配置，项目一般会默认设置， 可选
 
一般需要配置@:src
 
 
其余的常见配置，可选
 
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
lintOnSave: true
 

第一步:单纯的搭建出来我们的项目，并且通过webpack打包一个bundle.js然后运行起来
 
步骤:
 
1、建立项目必要的文件和文件夹(见截图)
 
 
2、配置webpack.develop.config.js，指定入口，输出文件
 
 
3、在main.js中写代码，App.vue中写代码
 
 
 
 
 
 
4、让我们的项目能运行App.vue
 
 
 
 
 
 
5、打包运行我们的项目
 
webpack--config webpack.develop.config.js ===>bundle.js
 
创建template.html 在里面导入bundle.js
 
在浏览器中运行，即可看到效果
 
 
 
 
 
第二步:对我们开发阶段的一个优化(更改源代码就能看到效果)
 
全局包:webpack-dev-server 
 
本地包:webpack-dev-server  html-webpack-plugin
 
1、html-webpack-plugin 在内存中，根据参照文件(template.html)生成index.html,注意：模版文件中不需要再自己写代码导入bundle.js
 
用法见截图
 
 
 
 
 
 
2、webpack-dev-server 在内存中生成一个bundle.js
 
webpack-dev-server对node封装，运行index.html
 
 
 
指令: