vue入门1(搭建项目)
安装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(搭建项目)的更多相关文章
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- Angular5入门与搭建项目
步骤 1. 设置开发环境 在开始工作之前,你必须设置好开发环境. 如果你的电脑里没有 Node.js®和 npm,请安装它们. 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来 ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- 使用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 ...
- vue入门之编译项目
好记性不如烂笔头,最近又开始学习vue了,编译的过程中遇到几个小坑,特此一记. 首先说一下vue项目如何编译,其实很简单,cd到项目文件夹,然后执行命令: npm run bulid 不过np ...
- vue-cli脚手架搭建项目简单入门一
搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)
Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...
- 架构师入门:搭建双注册中心的高可用Eureka架构(基于项目实战)
本文的案例是基于 架构师入门:搭建基本的Eureka架构(从项目里抽取) 改写的. 在上文里,我们演示Eureka客户端调用服务的整个流程,在这部分里我们将在架构上有所改进.大家可以想象下,在上文里案 ...
- Vue/Egg大型项目开发(一)搭建项目
项目Github地址:前端(https://github.com/14glwu/stuer)后端(https://github.com/14glwu/stuer-server) 项目线上预览:http ...
随机推荐
- CF914G Sum the Fibonacci
解:发现我们对a和b做一个集合卷积,对d和e做一个^FWT,然后把这三个全部对位乘上斐波那契数,然后做&FWT就行了. #include <bits/stdc++.h> , MO ...
- 洛谷P1072 Hankson 的趣味题(题解)
https://www.luogu.org/problemnew/show/P1072(题目传送) 数学的推理在编程的体现越来越明显了.(本人嘀咕) 首先,我们知道这两个等式: (a0,x)=a1,[ ...
- 关于设计项目UI界面的软件工具
关于画UI界面的软件,我在网上找了几个,今天式用这几款软件还可以 1.墨刀:国产的,这个专门画APP界面的,用起来比较简单,有免费版的,要注册才能用,提供云存储,收费版的云存储空间会多一些.网站: h ...
- ACM-ICPC 2018 徐州赛区网络预赛 G Trace(思维+set)
https://nanti.jisuanke.com/t/31459 题意 n个矩阵,不存在包含,矩阵左下角都在(0,0),给右上角坐标,后来的矩阵会覆盖前面的矩阵,求矩阵周长. 分析 set按照x或 ...
- 17、 利用扇贝网:https://www.shanbay.com/, 做个测单词的小工具。
先说下,我可以说完全没有看题目要求,我只看了下扇贝网的单词测试工具就开始编码了,写出来的代码尽可能的模仿了网站上的效果. 因为把问题搞复杂了,在这个练习上耽误了很长时间,最后都不想写了,所以代码有些混 ...
- Codeforces 1101G(线性基)
题目链接 题意 将序列尽可能分成多段使得任意$x \geq 1$段内的所有元素的异或和大于$0$问最多多少段 思路 首先,如果所有元素异或和等于$0$答案显然为$-1$,否则构造整个序列的线性基,这个 ...
- PHP 【一】
输出 [输出在表格中] <!DOCTYPE html> <html> <body> <h1>My first PHP page</h1> ...
- 有趣的F-String
F-String 让人上瘾 一个工具脚本的例子 https://www.pydanny.com/python-f-string-are-fun.html 在Python3.6的发布中,我们看到他们采纳 ...
- Easy RM to MP3 Converter栈溢出定位及漏洞利用
本文主要是Easy RM to MP3 Converter(MFC++编写)栈溢出的定位及windows下shellcode编写的一些心得. 用到的工具及漏洞程序下载地址https://github. ...
- Spring MVC详解
Spring MVC 教程,快速入门,深入分析 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar 目录 一.前言二.spring ...