1、npm install --global vue-cli // 安装vue-cli
2、vue init webpack myapp // 创建我的项目myapp项目名称
3、选择自己需要的配置，一路回车即可，选择Y安装，n不安装
? Project name myapp 
? Project description A Vue.js project 
? Author sunluyi <934353403@qq.com> 
? Vue build (Use arrow keys) 
? Vue build standalone 
? Install vue-router? Yes //是否安装路由 ：Y
? Use ESLint to lint your code? No //是否需要ESLint ：n
? Set up unit tests No //是否需要单元测试 ：n
? Setup e2e tests with Nightwatch? No //e2e测试 ：n
? Should we run `npm install` for you after the project has been created? (recommended) npm //npm安装
4、安装过程大概需要三分钟，成功后提示：Project initialization finished!
5、cd myapp //进入项目目录
6、npm run dev //启动项目
 
二、插件安装
 
1、如果需要vant-ui ： npm i vant -S
//main.js添加配置引入全部组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
2、自动按需引入组件 (推荐) ： npm i babel-plugin-import -D
修改.babelrc文件（修改后需要重新npm run dev）
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
    }],
    "stage-2"
  "plugins": [
      "transform-vue-jsx", 
      "transform-runtime",
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
//main.js按需引入
import {
    Button,//按钮组件
} from 'vant';
Vue.use(Button);
3、如果需要axios : npm install axios(如何引入配置axios请参考我的另一篇文章axios封装)
4、如果需要vuex :  npm install vuex --save
src目录下 新建store/store.js
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state: {
    mutations: {
    getters: {
//main.js引入
import {store} from './store/store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
5、如果需要使用less ： npm i less less-loader -S
6、移动端rem适配 ： 
使用vant官方推荐适配方案 ：
npm i lib-flexible
npm i postcss-pxtorem
//main.js引入
import  'lib-flexible';
//修改.postcssrc.js（修改后需要重新npm run dev）
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
//配置不生效需要重新npm run dev
vant官方rem适配方案，如果你的设计稿是750px，那么宽度100% == 375px
样式中可直接定义
div{
	width:375px; // 等同于width:100%
如果你需要在less文件中定义全局变量，请参考我的另一篇文章sass-resources-loader 全局注册 Sass/Less 变量
                    一、vue框架搭建（2.0+）1、npm install --global vue-cli // 安装vue-cli2、vue init webpack myapp // 创建我的项目myapp项目名称3、选择自己需要的配置，一路回车即可，选择Y安装，n不安装? Project name myapp ? Project description A Vue.js project ? ...
				
Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。
鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用
vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/
通过 npm 安装
在现有项目中使用 Vant 时，可以通过npm或yarn进行安装：
# Vue 2 项目，安装 Vant 2：
npm i vant -S
# Vue 3 项目，安装 Vant 3：
npm i vant@next -S
				
vue3-h5-template
基于 Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk 配置 + vconsole 移动端调试，构建手机端模板脚手架
项目地址：
掘金地址：
简书地址：
 建议手机端查看
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用  或  在同一台电脑中管理多个 Node 版本。
本示例 Node.js 12.14.0
vue-h5-template -- UI 主目录  
├── public -- 静态资源  
├ ├── favicon.ico -- 图标  
├ └── index.html -- 首页  
├── src -- 源码目录  
├ ├── api -- 后端交互的接口  
				
// 按照这个链接先把两个依赖装了，其中vue2的项目postcss-pxtorem要装5.0.0版本，不然会报错https://www.cnblogs.com/rzsyztd/p/14212513.html
// 装完之后，在package.json里面加上
"postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "Android 4.1",
				
我们做移动端开发的时候要适配各种的屏幕 , 最好的解决办法是使用 rem方式解决, 一般的解决办法是使用 css的识别浏览器宽度的办法, 不同的宽度, 设置不同的 font-size (因为rem 是以 html 的font-size为基准的)
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWi
main.js引入
import VideoPlayer from ‘vue-video-player’
require(‘video.js/dist/video-js.css’)
require(‘vue-video-player/src/custom-theme.css’)
Vue.use(VideoPlayer)
<templa...
3.清空历史记录
<div class="srarch_main">
	<img src="@img/icon/4.png" alt="删除历史记录" class="del" @click="empty">
	<div class="title">历史...
				
如图，点击切换时，需要转动动画
<img src="@img/assets/4.png" class="zhuan" @click="zhuan" :class="{go:rotate , aa :!rotate}">
rotate: false, //控制互转效果
zhuan(){
	this.rotate = !this.rotate;
				
vue-cli-service是一个用于运行、构建和检查Vue项目的命令行工具。具体来说，vue-cli-service serve用于在开发环境下运行项目，vue-cli-service build用于打包项目，vue-cli-service lint用于检查项目代码风格。这些命令是在项目的package.json文件中定义的脚本。例如，可以通过运行npm run serve来执行vue-cli-service serve命令，通过运行npm run build来执行vue-cli-service build命令，通过运行npm run lint来执行vue-cli-service lint命令。需要注意的是，在运行这些命令之前，需要先安装@vue/cli和@vue/cli-service这两个依赖。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>