安装node.js

安装cnpm

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

安装vue-cli脚手架构建工具

npm install -g vue-cli

直接执行vue可以列出vue-cli的用法列表

执行vue list会列出可以使用哪些模板

使用vue-cli构建项目

cd到项目目录

vue init webpack firstVue

这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

安装项目所需的依赖

安装后会生成module文件夹

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。此刻会自动打开浏览器

默认端口8080,最好不要用这个端口  我改成了不常用的端口

bs: 创建工程的时候,提示是否启用eslint检测的。 Use ESLint to lint your code? No

不然的话

扎心了老铁

可以设置webpack.base.conf.js

或者设置.eslintrc文件  0为不使用此规则,1为警告,2为报错

vue入门1(搭建项目)的更多相关文章

  1. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

  2. Angular5入门与搭建项目

    步骤 1. 设置开发环境 在开始工作之前,你必须设置好开发环境. 如果你的电脑里没有 Node.js®和 npm,请安装它们. 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来 ...

  3. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  4. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  5. vue入门之编译项目

    好记性不如烂笔头,最近又开始学习vue了,编译的过程中遇到几个小坑,特此一记.     首先说一下vue项目如何编译,其实很简单,cd到项目文件夹,然后执行命令: npm run bulid 不过np ...

  6. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  8. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  9. 架构师入门:搭建双注册中心的高可用Eureka架构(基于项目实战)

    本文的案例是基于 架构师入门:搭建基本的Eureka架构(从项目里抽取) 改写的. 在上文里,我们演示Eureka客户端调用服务的整个流程,在这部分里我们将在架构上有所改进.大家可以想象下,在上文里案 ...

  10. Vue/Egg大型项目开发(一)搭建项目

    项目Github地址:前端(https://github.com/14glwu/stuer)后端(https://github.com/14glwu/stuer-server) 项目线上预览:http ...

随机推荐

  1. OO期末总结

    $0 写在前面 善始善终,临近期末,为一学期的收获和努力画一个圆满的句号. $1 测试与正确性论证的比较 $1-0 什么是测试? 测试是使用人工操作或者程序自动运行的方式来检验它是否满足规定的需求或弄 ...

  2. B-树(B树)详解

    具体讲解之前,有一点,再次强调下:B-树,即为B树.因为B树的原英文名称为B-tree,而国内很多人喜欢把B-tree译作B-树,其实,这是个非常不好的直译,很容易让人产生误解.如人们可能会以为B-树 ...

  3. c语言中堆栈和静态空间

    什么是堆空间.栈空间与静态空间 堆空间:由程序员自己分配空间,如malloc需要指定分配多少个多大的字节空间,不用的时候需要自己释放 栈空间:栈空间是由系统自动分配与释放,如int,char等大小都已 ...

  4. MySQL高可用——PXC简介

    序言 Percona XtraDB Cluster(简称PXC集群)提供了MySQL高可用的一种实现方法. PXC属于一套近乎完美的mysql高可用集群解决方案,相比那些比较传统的基于主从复制模式的集 ...

  5. SQL Server 数据库编程技巧

    Ø  简介 本文主要介绍 SQL Server 数据库在平常的开发中,可能会涉及到的编程技巧,主要包含以下内容: 1.   解决 SQL Server 不支持 127.0.0.1 登录 2.   查询 ...

  6. python学习04

    数据类型-list,tuple 1) 1.1.list的表现方法:[1,2,3,4,5,6] 1.2.计算list的长度用 len() 1.3 list中的索引 a =[1,2,3,4,5] a[1] ...

  7. SpringBoot学习笔记<二>注解

    此篇为项目作结之笔记,关于注解. 项目启动入口@SpringBootApplication[必选]  @ServletComponentScan[可选] 注解后: Servlet.Filter.Lis ...

  8. iPhone8再MacOS上修改手机铃声

    1 选择下载好的mp3铃声文件,导入到itunes 2 将音乐改成AAA模式, 设置你的铃声时长 3 show in finder 找到文件,将mpr后缀修改成m4r,并删除掉mp3文件,将m4r文件 ...

  9. java获取当前运行的方法名称

    // 这种方式获取的话,数组的第一个元素是当前运行方法的名称,第二个元素是调用当前方法的方法名称 StackTraceElement[] stackTrace = new Exception().ge ...

  10. asyncio协议

    服务端 import asyncio import logging import sys from typing import Optional SERVER_ADDRESS = ('localhos ...