从零开始配置Vue项目(WebApp)

最新推荐文章于 2022-04-23 21:50:07 发布

默默的小跟班

最新推荐文章于 2022-04-23 21:50:07 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue web app

本文链接：https://blog.csdn.net/weixin_46393552/article/details/106784939

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍Vue项目从初始化安装到各项配置的全过程，包括使用vue-cli全局安装、基于webpack模板创建新项目、离线环境配置、依赖包安装、eslint及babel-polyfill配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 组件初始化安装

全局安装 vue-cli

npm install –-global vue-cli

创建一个基于webpack模板的新项目

vue init webpack my-project

Runtime + Compiler — runtime-only （小于6kb，只能用 .vue开发）
EsLint—Y
Router—Y

无网络环境下，离线配置环境。使用打包好的webpack
Terminal进入当前用户文件夹下（如：C:\Users\82601 ）

mkdir .vue-templates

(使用命令行才可以创建开头为 . 的文件夹)
复制打包好的webpack压缩包到此文件夹，并解压缩，然后回到需要创建vue项目的目录下

vue init webpack my-project --offline

安装依赖包

cd my-project
npm install
npm run dev

国内网络npm运行缓慢的话，安装淘宝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 各项配置

eslint配置
使用方法 npm run lint -- --fix

  "rules": {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 分号   永远要求分号  没有 报错
    'semi': ['error', 'always'],
    // 缩进  原生eslin不知道缩进怎么处理  就先把它关掉 然后下面自己写vue/script-indent
    'indent': 'off',
    // 基础缩进 1   倍数2   总共空2行
    'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    // 函数括号前的空格   异步async函数和匿名函数 前面需要空格   命名过的函数 不需要
    'space-before-function-paren': ['error', {'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always'}]
  }

config\index.js 配置
my-project\config\index.js

host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,    // 自动打开浏览器

本地调试的话 host: ‘host’, 即可，通过localhost:8080打开。
如果需要手机端调试。设置 host: ‘0.0.0.0’,
然后获取计算机ip地址。 Terminal: ipconfig
例如：IPv4 地址: 10.0.0.88
手机和电脑通过 10.0.0.88:8080 来访问

fastclick

npm install –-save babel-polyfill fastclick

移动端点击之后会有300ms的延迟，fastclick可以解决这个问题

babel-polyfill

npm install --save-dev babel-polyfill

原生的babel只会将ES6的语法（如箭头函数）转化成低版本的语法，但是对于ES6的API只会原封不动的保留，同样无法在低版本设备适应。 babel-polyfill就是可以在全局范围内添加API。

index.html
真正的页面，项目完成之后，会自动把所有内容注入进来

<link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="Shortcut Icon" type="image/x-icon">

写入网站标签头部图标

main.js 主入口
在此处引入这些资源

import 'babel-polyfill';
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import './config/rem'
import 'assets/scss/index.scss';
import 'swiper/css/swiper.css'
fastclick.attach(document.body);

.postcssrc.js
css的预处理相关
.gitignore
上传git忽视的部分
.eslintignore
eslint忽视拼写检查的部分
.editorconfig
编译器的配置文件可以放到别的编译器，修改配置
.babelrc
兼容ES5 或其他低版本的ES的配置文件
static
webpack不会进行任何处理，发布的时候整个拷贝过去

npm install --save-dev node-sass sass-loader

build\webpack.base.conf.js
配置一些路径快捷表示

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'api': resolve('src/api'),
  'assets': resolve('src/assets'),
  'base': resolve('src/base'),
  'components': resolve('src/components'),
  'pages': resolve('src/pages'),
}