macbook安装vue_mac 上安装vue,并创建项目 vue-cli3.x

本文介绍了如何在Mac上卸载旧版vue-cli,安装vue-cli 3.x,创建Vue项目,以及运行和打包项目的方法。在vue-cli 3.0之后,创建和运行项目的命令有所变化,需要使用`vue create`和`vue run serve`。同时,还提到了vue.config.js的配置,包括baseUrl、outputDir等,以及如何使用`npm run build`进行打包上传。
摘要由CSDN通过智能技术生成

vue-cli2.x安装创建,可见下文章

vue-cli3.x

之前项目运行遇vue报错,提示vue-cli,查阅资料发现,是之前项目vue-cli版本问题

解决:

1.更换安装地址

npm install npm -g

2.卸载之前vue-cli版本

npm uninstall -g vue-cli

3.安装新版本

npm install -g @vue/cli

ok,此刻问题处理完毕

but,vue-cli3.0后,创建,运行等语句也改变

4.创建项目

vue create 项目名(终端创建)

vue ui(可视化界面创建)

5.运行项目

vue run serve(此句,如用不习惯,可在package.json 更改换成2.x用的 vue run dev)

6.打包上传服务器

项目根目录下,创建vue.config.js文件

文件内容为:

module.exports = {

// 项目部署的基础路径

baseUrl: './',

// 构建好的文件输出到哪里

outputDir: 'dist',

// where to put static assets (js/css/img/font/...)

// 是否在保存时使用‘eslint-loader’进行检查

// 有效值: true | false | 'error'

// 当设置为‘error’时,检查出的错误会触发编译失败

lintOnSave: true,

// 使用带有浏览器内编译器的完整构建版本

// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

runtimeCompiler: false,

// babel-loader默认会跳过`node_modules`依赖.

// 通过这个选项可以显示转译一个依赖

transpileDependencies: [

/* string or regex */

],

// 是否为生产环境构建生成sourceMap?

productionSourceMap: false,

// 调整内部的webpack配置.

// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

chainWebpack: () => {},

configureWebpack: () => {},

// CSS 相关选项

css: {

// 将组件内部的css提取到一个单独的css文件(只用在生产环境)

// 也可以是传递给 extract-text-webpack-plugin 的选项对象

extract: true,

// 允许生成 CSS source maps?

sourceMap: false,

// pass custom options to pre-processor loaders. e.g. to pass options to

// sass-loader, use { sass: { ... } }

loaderOptions: {},

// Enable CSS modules for all css / pre-processor files.

// This option does not affect *.vue 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,

// PWA 插件相关配置

// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

pwa: {},

// configure webpack-dev-server behavior

// devServer: {

// open: process.platform === 'darwin',

// disableHostCheck: false,

// host: '0.0.0.0',

// port: 18000,

// https: false,

// hotOnly: false,

// // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

// proxy: null, // string | Object

// before: app => {}

// },

// 第三方插件配置

pluginOptions: {

// ...

}

}

npm run build 打包

注意:baseUrl 为上传服务器的域名后路径

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值