使用vue-cli3新建一个项目并写好基本配置(推荐)

1. 使用vue-cli3新建项目： https://cli.vuejs.org/zh/guide/creating-a-project.html

注意，我这里用gitbash不好选择选项，我就用了基本的cmd（系统命令提示符）：上下箭头和空格键可控制选项。

详细步骤：

（1）vue create init： 这里我选择了自定义配置

（2）使用上下箭头和空格进行选择，我这里选择了这四个，之所以没用css pre-processors是因为我的项目中要用postcss-cssnext，后面会有详细配置说明

（3）后面的

Use class-style component syntax? 是否使用class风格的组件语法?

Use Babel alongside TypeScript for auto-detected polyfills? 是否使用babel做转义?

Use history mode for router? 是否使用路由的history模式?

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 把babel,postcss,eslint这些配置文件放哪?

Save this as a preset for future projects? (Y/n) 是否记录一下以便下次继续使用这套配置?

2. 改项目端口（个人需求）： 在根目录新建vue.config.js（vue-cli3其他配置相关也写在这里）

module.exports = {
 devServer: {
  port: 8100, // 端口号
 }
}

3. 根据环境设置相关变量（比如请求地址、打包输出路径等），并打包不同环境代码

（1）在根目录新建appconf.json，保存不同环境的对应变量配置

{
 "dev": {
 "serverUrl": "http://localhost:57156/"
 },
 "build": {
 "serverUrl": "http://build.com/",
 "outputDir": "../../dist/build",
 "productId": "111"
 },
 "alpha": {
 "serverUrl": "http://build-test.com/",
 "outputDir": "../../dist/alpha",
 "productId": "222"
 }
}

（2）src下新建common文件夹，下面新建configByEnv.js，根据环境设置对应变量值

var path = require('path')
var appconf = require('../../appconf.json')
var serverurl
var productId = ''
switch (process.env.NODE_ENV) {
 case 'production':
  serverurl = appconf.build.serverUrl
  productId = appconf.build.productId
  break
 case 'development':
  serverurl = appconf.dev.serverUrl
  break
 case 'alpha':
  serverurl = appconf.alpha.serverUrl
  productId = appconf.alpha.productId
  break
}
// 配置 build 文件输出路径, 可以使用绝对路径或相对路径
var outputDir
var reg = /^\.(\.)?\/.*/
if (reg.test(appconf.build.outputDir)) {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = path.resolve(__dirname, appconf.alpha.outputDir) // 相对路径
 else
  outputDir = path.resolve(__dirname, appconf.build.outputDir) // 相对路径
} else {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = appconf.alpha.outputDir
 else
  outputDir = appconf.build.outputDir // 绝对路径
}
var conf = {
 outputDir: outputDir,
 serverUrl: serverurl,
 env: process.env.NODE_ENV,
 productId: productId
}
module.exports = conf

（3） 在需要用以上变量的地方引入即可，如

.js中： var { outputDir } = require('./src/common/configByEnv.js');

.ts中：import {serverUrl} from '@/common/configByEnv.js'；

注意：ts这样引入会报错，需要将tsconfig.json中添加  "allowJs": true,

-------- 上面针对某些变量根据不同环境设置了不同值，那么打包时只要更改环境，打包后则会取到不同环境对应的特定值 -----

因为项目中已经有开发环境和打包build环境，我这里只要再加一个打包alpha测试环境：

（1）package.json 中添加

{
 ···
 "scripts": {
 "serve": "vue-cli-service serve",
 "alpha": "vue-cli-service build --mode alpha",
 "build": "vue-cli-service build"
 }
 ···
}

（2）根目录新建.env.alpha，其内容为：

NODE_ENV = 'alpha'

（3）在vue.config.js设置打包输出路径

var { outputDir } = require('./src/common/configByEnv.js');
module.exports = {
 outputDir: outputDir,
 ···
}

4. 在项目中引入并配置postcss-nextcss

1.

// npm install autoprefixer --save-dev 此步不需要了，因为postcss-cssnext自带这个依赖

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev

2. package.json中如果没有自动生成以下内容，则手动添加以下内容

{
 ···
 "postcss": {
 "plugins": {
  "postcss-cssnext": {}
 }
 },
 ···
}

5. 引入组件库：我这里用了elementUI，配置步骤：

第一步：进入到项目目录里

npm i element-ui -S

第二步：在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

以上为vue-cli3初始化项目和一些基础配置，可根据个人喜好将ts和css文件与.vue分离。然后，愉快的写代码吧。。

总结

以上所述是小编给大家介绍的使用vue-cli3新建一个项目并写好基本配置 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue-Cli 3.0 中配置高德地图的两种方式

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对.我所遇到的问题: 1. 安装之后使用,始终提示跨域问题. 2. 页面刷新之后地图出不来,第一次进入页面时没问题.因为这两个问题所以放弃了这个组件的使用.我想可能是我哪个地方代码有问题. 二.直接引用高德地图 SDK 因为第一种方式尝试失败了,所以我选择

  • vue项目中使用lib-flexible解决移动端适配的问题解决

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size

  • vue-cli配置flexible过程详解

    vue-cli配置flexible过程详解

    基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应 安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-de

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • 详解vue.js移动端配置flexible.js及注意事项

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi

  • 关于vue-cli 3配置打包优化要点（推荐）

    关于vue-cli 3配置打包优化要点（推荐）

    配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

  • 基于vue-cli配置lib-flexible + rem实现移动端自适应

    基于vue-cli配置lib-flexible + rem实现移动端自适应

    安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 bu

  • 基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件

  • 使用vue-cli3新建一个项目并写好基本配置(推荐)

    1. 使用vue-cli3新建项目: https://cli.vuejs.org/zh/guide/creating-a-project.html 注意,我这里用gitbash不好选择选项,我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项. 详细步骤: (1)vue create init: 这里我选择了自定义配置 (2)使用上下箭头和空格进行选择,我这里选择了这四个,之所以没用css pre-processors是因为我的项目中要用postcss-cssnext,后面会有详细

  • vue-cli3+typescript新建一个项目的思路分析

    最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过vue-cli2+javascript进行开发,而vue-cli3早在去年8月就已经发布,并且对于typescript有了很好地支持.所以为了熟悉新技术,我选择使用vue-cli3+typescript进行新应用的开发.这里是新技术的学习记录. 初始化项目 卸载老版本脚手架,安装新版本脚手架后,开始初始化项目.初始化的命令跟2.x版本的略有不同,以前是 vue init webpack project-name ,而现在是 vue

  • Vue CLI3搭建的项目中路径相关问题的解决

    这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

  • 使用maven开发springboot项目时pom.xml常用配置(推荐)

    如题,记录一些平常开发用的pom文件细节 1.使用parent父类引用,解决依赖版本号不确定时自动匹配的问题 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.7.RELEASE</version> <relativePath/>

  • webpack构建vue项目的详细教程（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

  • Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h =>

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • 使用IntelliJ IDEA2020.2.2 x64 新建java项目并且输出Hello World

    第一步:打开IntelliJ IDEA 2020.2.2 x64 出现欢迎画面后,我们选择 new Project 来新建一个项目 第二步:我们先创建一个空的项目 这里就是要选择一下你所安装的JDK路径文件夹目录! 如果你没有安装JDK的话 是不能运行JAVA程序的 ! 注意一下 完成后点击NEXT执行下一步! 下面我们直接点击NEXT 不从模板中创建项目! 第三步: 新建项目后, 取一个项目名称 以及选择项目的路径文件夹 注意: 项目名称和项目路径文件夹名称 最好不要重名! 点击完成! 空项目

  • 解决新建一个vue项目过程中遇到的问题

    我就废话不多说了,大家还是直接看代码吧~ /usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev --scripts-prepend-node-path=auto > mytodolists@1.0.0 dev /Users/chenqiurui/WebstormProjects/myVue > webpack-dev-server --inline --progress --config build

随机推荐