怎么用Vuecli 3.0快速创建项目

一.安装

1.安装node.js,这里需要注意的是,Vue CLI 3需要 nodeJs ≥ 8.9,所以我们去中文官方下载地址:http://nodejs.cn/download/,下载最新版本即可;

2.安装vue-cli3.0版本:

两种情况:1.你之前安装过vue-cli3.0之前的版本,需卸载之前版本,再安装新版本;

卸载旧版本:

npm uninstall vue-cli -g

安装新版本:

npm install -g @vue/cli

2.你之前没有安装过vue-cli3.0之前的版本,直接安装新版本即可;

3.安装nrm,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换:

1.全局安装nrm

npm install -g nrm

2.查看当前使用源

nrm current

3.查看可选源(带*号即为当前使用源)

nrm ls

4.切换源

以淘宝镜像为例:

nrm use taobao

5.测试源速度(即响应时间)

比如:测试官方源和淘宝源的响应时间

nrm test npm

nrm test taobao

可以得出,淘宝源的速度要远快于官方源,安装完nrm之后,我们进行创建项目,我们下载和搭建的速度就会快很多,才能称上快速两个字;

二.创建项目

1.新建项目

vue create jjrweb //后面为文件名 不支持驼峰(含大写字母)

弹出如下界面:

1.第一个“ my-default”是我之前保存的预设配置,等下下面会介绍到;

2.default(babel,eslint):默认套餐,提供 babel 和 eslint 支持;

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

如果想要更多的支持,这里我选择Manually select features:切换到这项,按下 enter 键选中,

弹出如下界面:

可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。

( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试

这里我选择的为图片中的选项,回车:

弹出如下界面:

是否使用history router:这里我选择NO,后期如果要改成history,手动去路由里添加即可,回车;

弹出如下界面:

css预处理器,主要为css解决浏览器兼容、简化CSS代码 等问题,你习惯使用哪种选择哪种即可,这里我选择Less

弹出如下界面:

ESLint:提供一个插件化的javascript代码检测工具,ESLint + Prettier //使用较多,这里我选择ESLint + Prettier

弹出如下界面:

何时检测:这里我选择Lint on save  保存时检测

弹出如下界面:

如何存放配置 :这里我选择图中选择

弹出如下界面:

是否保存本次配置(y:记录本次配置,然后需要你起个名; n:不记录本次配置):这里我选择NO,上文中正好说到这个,如果你选择yes,下次创建项目的时候就可以选择按之前模板来

弹出如下界面:

搭建完成:可以进入到该项目文件夹,然后运行项目;

2.项目结构

精简了很多,但还是和vue2.0有很多区别的,基本的用法变化不是特别大,如图:

3.vue-cli2.0和vue-cli3.0的区别

1.vuex(状态管理):

vue cli 2 中 :vuex是搭建完成后自己npm install的,并不包括在搭建过程中。可以看到vue cli 2的vuex默认文件夹(store)又包含了三个js文件:action(存放一些调用外部API接口的异步执行的的方法,然后commit mutations改变mutations 数据)、index(初始化mutations 数据,是store的出口)、mutations(处理数据逻辑的同步执行的方法的集合,Vuex中store数据改变的唯一方法commit mutations)

vue cli 3 中:vuex是包含在搭建过程供选择的预设。vue cli 3 中默认只用一个store.js代替了原来的store文件夹中的三个js文件。action、mutations、state以及store 的 getters 的用法有很多

2.router (路由):

vue cli 2 :“ router/index.js ”

vue cli 3:“router.js”(用法和做的事都一样)

3.去掉 static  、 新增 public 文件夹

vue cli 2 :static 是 webpack 默认存放静态资源的文件夹,打包时会直接复制一份到dist文件夹不会经过 webpack 编译

vue cli 3  :摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式:

经webpack 处理:在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

不经webpack 处理:放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份,不做任何编译压缩处理

4.index.html :

vue cli 2 :“index.html ”

vue cli 3 :“public/index.html ”此模板会被 html-webpack-plugin处理的

5.src/views:

vue cli 3 的 src文件夹 新增 views文件夹 用来存放 “页面”,区分 components(组件)

6.去掉 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹 :

vue cli 3 中,这些配置 你可以通过 命令行参数、或 vue.config.js (在根目录 新建一个 vue.config.js 同名文件)里的 devServer字段配置开发服务器

7.babel.config.js:

配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同,这个配置文件不会使用基于文件位置的方案,而是会一致地运用到项目根目录以下的所有文件,包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

8.根目录的一些其他文件的改变:

之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、 vue.config.js 中配置

三.项目编写

1.在package.json文件中添加

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode product",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

2.在根目录下创建.env.development文件,并配置

# 开发环境
NODE_ENV = ‘development‘

# base api
VUE_APP_BASE_API = ‘/api‘
VUE_APP_MOCK = ‘/mock‘

VUE_APP_BASE_HTTP_MOCK = ‘http://11.3.120.181:8989‘
VUE_APP_BASE_HTTP = ‘http://11.3.120.181:8765‘

3.在根目录下创建.env.test文件

# 测试环境
NODE_ENV = ‘test‘

# base api
VUE_APP_BASE_API = ‘/api‘
VUE_APP_BASE_HTTP = ‘http://11.3.120.181:8765‘

4.在根目录下创建.env.product文件

# 生产环境
NODE_ENV = ‘product‘

#业务接口地址
VUE_APP_BASE_API = ‘/api‘
#VUE_APP_API_HOST = ‘https://www.shenchan.com‘
VUE_APP_API_HOST = ‘http://10.3.320.201:8765‘

5.在main.js里配置api变量

import api from ‘./http/index‘
import globalData from ‘./utils/globalData‘

Vue.config.productionTip = false;

Vue.use(api)

// 设置全局变量
Vue.prototype.$globalData = globalData

6.新建一个utils文件夹,里面建立一个globalData.js文件

const globalData = {
  API_HOST: process.env.VUE_APP_API_HOST
}
export default globalData

7.新建一个http文件夹,里面建立三个api.js,index.js,list.js文件,以及一个module文件夹里面存放login.js接口

api.js:设置接口配置和拦截器的编写

import axios from ‘axios‘
// import { getToken } from ‘@/utils/auth‘
import globalData from ‘@/utils/globalData‘
// create an axios instance
const service = axios.create({
  baseURL: globalData.API_HOST, // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // mock数据和接口数据区分
    if (config.method === ‘get‘ && config.params) {
      console.log(‘1111‘)
      // config.params.applytime = new Date()
    }
    if (process.env.NODE_ENV === ‘product‘) {
      config.url = process.env.VUE_APP_API_HOST + config.url
      console.log(‘2222‘+config.url)
    } else {
      config.url = process.env.VUE_APP_BASE_HTTP + process.env.VUE_APP_BASE_API + config.url
      console.log(‘3333‘+config.url)
    }
    console.log(‘请求地址:‘ + config.url)
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    console.log(‘返回结果:‘ + response)
    const res = response.data
    console.log(‘4444‘ + res)
    if (res !== ‘‘) {
      if (process.env.NODE_ENV === ‘development‘) {
        console.log(‘开发环境‘+res.msg) // 提示
      }
      return Promise.reject(res.msg)
    } else {
      return res
    }
  },
  error => {
    console.error(error)
    if (error.response.data.code === 401) {
      console.log(‘登录异常,请重新登录‘) // 提示,然后在此处添加跳转到登录
      return false
    }
    if (process.env.NODE_ENV === ‘development‘) {
      console.log(error.response.data + ‘开发环境err‘) // 提示
    }
    return Promise.reject(error)
  }
)

export default service

index.js:设置请求名头

import list from ‘./list‘

const busineApi = Vue => {
  if (busineApi.installed) {
    return
  }
  busineApi.installed = true
  Object.defineProperties(Vue.prototype, {
    // 此处挂载在 Vue 原型的 $list 对象上
    $hjApi: {
      get () {
        return list
      }
    }
  })
}
export default busineApi

list.js:接口模块的引入

// Saas系统
import login from ‘./module/login‘ // 登录模块

const allApi = Object.assign(login)

export default allApi

login.js:接口定义

import axios from ‘../api‘

// 登录
export const login = (data = {}) => {
  return axios({
    url: ‘/auth/oauth/token‘,
    method: ‘get‘,
    params: data
  })
}

export default {
  login
}

8.页面里面请求写法

methods: {
    // 登录
    login () {
      console.log(‘abcd‘)
      // 登录接口
      this.$hjApi.login({
        username: ‘hjhj‘,
        password: ‘123456‘,
      }).then(res => {
        console.log(res+‘登录成功‘)
      }).catch(err => {
        console.log(err)
      })
    }
  }

原文地址:https://www.cnblogs.com/cider/p/11828820.html

时间: 2024-11-01 18:06:03

怎么用Vuecli 3.0快速创建项目的相关文章

springBoot(2)---快速创建项目,初解jackson

快速创建项目,初解jackson 一.快速创建项目 springboot官网提供了工具类自动创建web应用:网址:http://start.spring.io/ 官网页面 1.快速创建一个 选择web代表这是一个web项目 这样就可以吧项目放到eclipse或者idea中进行运行了. 这里需要注意几点: 1.springboot2X,所需要mevan是3.0+,JDK是1.8+ 2.在做项目开发的时候,主入口Application类(带有注解@SpringBootApplication),要放在

vue-cli 3.0生成的项目run build后为空白页

vue-cli 3.0 生成的项目与2.x不同,其中并没有webpack配置文件config/index.js.这个时候需要我们在项目的根目录下创建一个vue.config.js文件,代码如下: 1 module.exports = { 2 baseUrl: './', 3 }; 自己看效果的时候,再将路由改为hash模式.就可以直接打开生成的index.html看到和run serve时一样的效果了. 原文地址:https://www.cnblogs.com/bjhl/p/10499021.h

SpringBoot2.0 最简单的 idea 快速创建项目

第一步 第二步 第三步 以上就是idea快速创建springboot的方法,创建之后等maven 依赖下载完成,就可以使用 原文地址:https://www.cnblogs.com/telwanggs/p/10770195.html

vue-cli 3.0脚手架搭建项目

1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -v 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略

SpringBoot系列之快速创建项目教程

本博客简介一下SpringBoot快速创建工程的方法,主要介绍一下Spring Initializer,Spring Initializer是IntelliJ IDEA才集成的一种快速创建SpringBoot项目的模式 选择File->New->Project->找到Spring Initializer选项,注意要联网,因为idea也是对接SpringBoot官网的.ok,选择好jdk之后,就可以点next 注意:这里的type可以是maven项目,也可以是gradle项目,maven

vue-cli3快速创建项目

文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 2.查看版本/是否安装成功 vue -V image.png 3.在新文件夹下创建项目 vue create my-project image.png 指向的vuecli3是因为上一次记录过的cli3配置,第一次执行create是没有的 按键盘上下键可以选择默认(d

cocos2dx 3.x 快速创建项目

第一次创建项目时要先运行一遍  setup.py  后在创建项目,如果出现“cocos”不是内部命令之类,请检查环境变量里面的系统变量和管理员用户变量是否都添加了cocos_console: 新建一个 .txt 文档 ,复制下面内容: @echo off echo =============Cocos2D-x新建项目============== set /p name=输入项目的名称: echo 项目名为: %name% echo 正在创建新项目... set pack=com.richard.

vue cli4.0 快速搭建项目详解

搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装vue cli? 剧场环境已搭建好,开始表演! 1.进入一个目录,创建项目 对应命令: vue create project-one 2.我们这里选择手动配置 按 ↓ 选择“Manually select features”,再按 Enter 3.选择你需要的配置项 通过↑ ↓ 箭头选择你要配置的项,

vue2.0快速构建项目

准备工作:已经安装了nodejs,已经安装了vue-cli $ mkdir gankbook $ cd gankbook $ vue init webpack-simple 按照需要写好信息,这将会写在package.json里面去的 创建完好之后运行起来 先下载npm包 $ npm install //运行 $ npm run dev //发布 $ npm run build //还需要安装vue-router  vue-resource 这里用了淘宝的镜像,避免安装失败,当然前提还是你得先安