vue-cli3.0搭建脚手架及移除严格模式_vue3.0脚手架-优快云博客

本文链接：https://blog.youkuaiyun.com/Wendymwz/article/details/106203105

vue-cli3.0搭建脚手架及关闭严格模式

 vue的更新可以说是非常快的了。
 目前vue的最新版本是2.6，vue-cli最新是4.x

一:用vue-cli3.x来写项目

我们是基于node进行创建的，所以说我们要先安装node,我们可以参考node的官网：：https://nodejs.org/en/download/

1.1 安装vue-cli

npm install -g @vue/cli在这里插入代码片

1.2 创建项目

vue create demo//vue create 项目名

1.3：手动安装：

在这里我们选择后者，手动安装：

? Please pick a preset:  
❯ default (babel, eslint)   //回车自动安装脚手架需要的各种包
  Manually select features  //手动安装，需要自己配置选择各种要安装的包

1.4详细的创建步骤

在这里插入图片描述

1.5 进入目录

cd demo

1.6 启动服务：

npm run serve

二：配置跨域请求：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

三：手机测试项目：

注意：我们一定要保证手机跟我们的电脑在同一个WiFi下，

、运行项目：npm run serve
查找到项目所在电脑的ip地址：
 App running at:
  - Local:   http://localhost:9999/ 
  - Network: http://192.168.4.162:9999/  //手机上可以访问的

四：手机端适配：

手机端适配的方法有很多：rem,弹性盒子（flex）,百分比，媒体查询，vw，vh
我们推荐使用rem布局。
rem布局：动态js计算：

<script>
    function rem() {
        document.documentElement.style.fontSize =
            document.documentElement.clientWidth / 15 + 'px'
    }
    rem();
    window.onresize = rem;
</script>

五：目录结构介绍:

.
├── 'node_modules'     // npm下载包都在这个文件夹
├── 'public'  //我们主要是用来存放json数据，静态资源等              
│   ├── 'favicon.ico'
│   └── 'index.html'  // 作为入口模板,最后打包文件所在地，也是main,js 绑定的 dom
├── 'src'             // 整个工程文件目录 （入口文件）
│   ├── 'api'         // 创建用来管理接口的文件夹 
│   │   └── 'index.js'    // axios 入口使用
│   ├── 'assets'      // 静态资源管理负责管理图片文字一类的
│   │   ├── 'font'    // 存放字体库文件夹
│   │   └── 'img'     // 存放图片的文件夹
│   ├── 'components'  // 存放组件文件夹
│   │   └── 'HelloWorld.vue'     // 这是一个名叫HelloWorld.vue组件
│   ├── 'config'      // 项目配置的文件夹
│   │   └──  'index.js'          // 利用node 找包特性 起名index.js 可以快速导包

│   ├── 'router'      // 路由相关
│   │   ├── 'index.js'            // 利用node 找包特性 起名index.js
│   │   └── 'router.js'           // 路由配置
│   ├── 'store'        // Vuex状态管理文件夹

│   ├── 'views'        // 视图组件 和 公共组件
│   │   ├── 'About.vue'
│   │   └── 'Home.vue'
│   ├── App.vue     // 由于render 特性 所以需要一个被渲染的vue文件
│   ├── main.js     // 项目入口，文件打包会找这个文件，并且将这个文件的内容打包
├── .browserslistrc      //目标浏览器配置表
├── .editorconfig        // 编辑器配置
├── .gitignore           // 忽略用git提交省略的提交目录
├── babel.config.js      //  高级语法转低级语法
├── package.json
├── package-lock.json    // 锁版本包
├── postcss.config.js    //CSS预处理器
├── README.md
└── vue.config.js        // 项目自定义配置