vue-cli3 搭建 vue 项目

项目是在mac的环境下配置的 win的同学请移步【https://www.cnblogs.com/zhaomeizi/p/8483597.html】
  • 安装 node.js

         1. 首先是打开node官网【https://nodejs.org/en/#download】 下载LTS版本,一路傻瓜式安装。

         2. 打开Mac下的终端输入:node -v 会出现版本号就说明成功了。

  • 安装 npm

         1. 首先获取 node 的安装模块的权限

sudo chmod -R 777 /usr/local/lib/node_modules/

     2. 然后安装 npm 淘宝镜像

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

     3. 检测是否安装 npm 成功

npm -v
  • 安装 webpack (全局安装)
npm install webpack -g

     如果安装卡住了,或者安装不上,可以尝试

cnpm install webpack -g
  • 安装 vue 手脚架(全局安装,比如 vue 模板等)
npm install vue-cli -g
  • 创建 vue 项目

         1. 创建文件目录并 cd 到对应的文件夹下
vue create projectName(项目名称)

     2. 可以选择自动的配置,也可以选择手动的配置,这里我选择的是自动配置,出现如下图表示项目创建成功啦。

     3. 项目创建好之后可以运行查看项目,出现正常的界面后说明项目创建成功了。

     4. 项目编写完成我们需要将其打包,直接  npm run build  就可以了,对应目录下增加了  dist  文件夹和内容。

     5. 这里我们会遇到一个问题,直接打开 index.html 是一个空白的页面,这我们需要增加一些配置。

     打开项目增加vue.config.js文件  cli3搭建项目不会创建这个文件,需要手动创建

增加代码:

module.exports = {
publicPath: './'
}

     6. 重新进行build就有页面展示了,这样我们就完成了vue项目的创建和打包。

vue-cli3 搭建 vue 项目的更多相关文章

  1. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  2. VUE CLI3.X 创建项目

    Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...

  3. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  4. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  5. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

  6. VUE+ElementUI 搭建后台项目(一)

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  7. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

  8. VUE环境搭建,项目配置(Windows下)

    公司想做官网,框架我自己定,然后就选了vue,那现在就来加深一遍vue的环境的搭建吧 1.安装node.js,这里就不再多说了,很简单,如果之前有安装就不用再安装了,可node -v查看node版本 ...

  9. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  10. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

随机推荐

  1. (七十二)c#Winform自定义控件-雷达图

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  2. Promise.all结合数组Map用法

    Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise  ...

  3. 关于svn更新失败,clearup异常解决

    直接上主题: 1. 下载sqlite3工具(https://files.cnblogs.com/files/eric-fang/sqlite-tools-win32-x86-3210000.zip), ...

  4. redis列表底层实现之一——链表

    注意标题中的“之一”,那么什么情况下,列表会使用链表作为其数据结构呢? 答案就是——列表键包含了大量的元素,或者列表中包含的元素都是比较长的字符串. Ok,由于链表大家都比较熟悉,接下来就直接给出链表 ...

  5. 踩坑踩坑之Flask+ uWSGI + Tensorflow的Web服务部署

    一.简介 作为算法开发人员,在算法模块完成后,拟部署Web服务以对外提供服务,从而将算法模型落地应用.本文针对首次基于Flask + uWSGI + Tensorflow + Nginx部署Web服务 ...

  6. MongoDB 学习笔记之 查询表达式

    查询表达式: db.stu.find().count() db.stu.find({name: 'Sky'}) db.stu.find({age: {$ne: 20}},{name: 1, age: ...

  7. iOS 设备数据管理工具 iMazing v2.10.3 绿色便携版

    iMazing 是一款可以帮助用户管理 iOS 设备的软件,功能远远超出 iTunes.iMazing 连接你的 iOS 设备(iPhone. iPad 或 iPod)相连,使用起来也非常的方便.你可 ...

  8. C#基于Quartz.NET实现任务调度并部署Windows服务

    一.Quartz.NET介绍 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp ...

  9. 【Autofac打标签模式】AutoConfiguration和Bean

    [ Autofac打标签模式]开源DI框架扩展地址: https://github.com/yuzd/Autofac.Annotation/wiki *:first-child { margin-to ...

  10. Kafka技术原理知识点总结

    1.Kafka是由Linkedin公司开发的,使用Scala语言编写的,分布式,多副本,多分区的,发布订阅模式的消息系统,他通常用于日志系统的搭建,2.Kafka和Zookeeper:Kafka通过Z ...