Vue Cli3 创建项目

lifefriend_007 发布于2019-08-23 12:20 / 1660人阅读

摘要：创建项目安装创建一个项目默认套餐，提供和支持。自己去选择需要的功能，提供更多的特性选择。比如如果想要支持，就应该选择这一项。支持使用书写源码。支持代码风格检查和格式化。

Vue Cli3 创建项目

Vue,Markdown

1. 安装

npm install -g @vue/cli

2. 创建一个项目

vue create iview-admin
# OR
vue ui

default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

TypeScript 支持使用 TypeScript 书写源码。

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

3. 运行项目

$ npm run serve

4. 在根目录创建 vue.config.js 空文件，配置文件

module.exports = {
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==="production"  (打包环境)
   * process.env.NODE_ENV==="development" (开发环境)
   * baseUrl: process.env.NODE_ENV==="production"?"https://cdn.didabisai.com/front/":"front/",
   */
  // 基本路径
  baseUrl: "/",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  //如果想要引入babel-polyfill可以这样写
  // configureWebpack: (config) => {
  //   config.entry = ["babel-polyfill", "./src/main.js"]
  // },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    // open: process.platform === "darwin",
    // 自动打开浏览器
    open: true,
    host: "0.0.0.0",
    port: 8080,
    https: false,
    hotOnly: false,
    // 处理跨域问题
    proxy: {}, // 设置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

具体请查看 Vue Cli 官网

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。

专线服务超融合服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98346.html

Vue CLI3.0 中使用jQuery 和 Bootstrap

摘要：中使用和不是特别符合原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。其中用于在中显示弹窗提示下拉菜单，所以需要引入。因为我的文件经过了我自己的调整，所以单独放在文件夹中做单独引入。 Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。在 Vue CLI2.0 中引入 jQuery ...

luqiuwen 2019-08-23 15:32 评论0 收藏0
Vue运行时全解析 - VueCLI3上手（一）

摘要：可以译作运行时过程全面分析和解析，这个全面分析涉及到比较基础的或者复杂的重要前端概念和中的概念等。注本篇是运行时全解析系列文章的第一篇，首次发表于，友善转载蟹蟹。附更多内容请参考核心维护者蒋豪群同学的的公开课视频 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以译作vue...

molyzzx 2019-08-23 12:04 评论0 收藏0
Vue运行时全解析 - Vue的引入（二）

摘要：因为仅仅包含运行时编译比完整版少的代码体积，如果你需要使用完整包也是可以的，你需要调整配置。显式的改变运行时引用包模块在引入时做了什么看完了这几个文件的用途之后我们再来看看引入的时候做了什么带着这个疑问我们继续探索。 Vue Runtime Full Analysis - Import Vue Module 回顾系列文章之《VueCLI3上手》上一节《Vue运行时全解析 - Vue...

jiekechoo 2019-08-23 12:03 评论0 收藏0
Spring Boot [Vue + Vue CLI3 + Vant 快速构建你的移动商城]

摘要：导读记录一次基于原有的后端构建移动端商城，参照已有的安卓应用设计图开发。导读记录一次基于原有的后端api构建移动端商城，参照已有的安卓应用UI设计图开发。技术选型后端 Spring Cloud OAuth2 + Spring Cloud Eureka + Spring Boot 前端 Vue + Vue Router + Vue CLI3 + Vant ；移动商城从技术选型到项...

Eidesen 2019-08-16 13:29 评论0 收藏0
vue cli3 构建的项目中使用高德地图

摘要：高德文档梳理首先，我们要加载外部，在外部加载完毕，然后初始化地图。加载外部你的初始化地图初始化地图的前提是，成功加载外部，然后使用高德提供的对象来构造实例。高德文档 https://lbs.amap.com/api/java... 梳理首先，我们要加载外部js，在外部js加载完毕，然后初始化地图。加载外部js showImg(https://segmentfault.com/im...

he_xd 2019-08-23 16:26 评论0 收藏0