Vue.js项目脚手架构建
vue.js文档:https://cn.vuejs.org/v2/guide/
参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威。
我这个主要是看相关的学习视频搭建的。
一、环境准备
环境准备(node.js环境):
脚手架环境:vue-cli
执行如下命令安装:
npm install vue-cli -g 或者cnpm install vue-cli -g
安装成功后在在命令行里输入vue,出现如图表示OK

二、项目初始化
vue init webpack project-name
例如:
vue init webpack blog
出现下面示意图:

Project name 可以自定义项目名
Project description 项目描述
Author 作者相关信息
VCue build 通常有三种 我选择标准的也就是第一种
Install vue-router 是否安装vue-router vue-router是vue的通信方式 我选择安装
EsLint 是否选择EsLint语法检查 我选择是
Set up unit tests 我不构建单元测试 所以选择否
其它的还有,这里就不再赘述。
初始化项目成功后,会出现如下所示:

三、运行项目
cd blog
npm run dev
出现如图,表示成功

在浏览器输入:http//localhost:8080,出现如图:

Vue.js项目脚手架构建的更多相关文章
- vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
- Vue.js项目的开发环境搭建与运行
写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...
- vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- vue源码分析—Vue.js 源码构建
Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...
- 从零开始搭建一个vue.js的脚手架
在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...
- 建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
随机推荐
- quartz部署出现找不到表的情况,错误提示: Table 'heart_beat.QRTZ_LOCKS' doesn't exist
描述一下,本地可以,部署到Linux就不行,Linux上的数据库是本地直接拷贝上去的,项目环境是Spring Boot2.1.Shiro.MyBatis.Redis.swagger.Bootstrap ...
- PATH、CLASSPATH、CLASSPATH
PATH: 说明: 环境变量中的path,意在在向计算机发出指令时的一个指向路径,如 一般会在path里加上:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 其中:%JAVA_ ...
- ES 5 中 判断数组的方法
源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 洛谷P2447 [SDOI2010]外星千足虫(异或方程组)
题意 题目链接 Sol 异或高斯消元的板子题. bitset优化一下,复杂度\(O(\frac{nm}{32})\) 找最优解可以考虑高斯消元的过程,因为异或的特殊性质,每次向下找的时候找到第一个1然 ...
- 教你读懂vue源码技术教程
由于 Vue 的源码采用 ES6,所以你至少应该掌握 ES6 才能看得懂,其次你最好对 package.json 中的字段的作用有所了解.由于 Vue 使用 Rollup 构建,所以你不了解 Roll ...
- 如何将web项目部署到Ubuntu服务器上
情景回顾: 前几天在下本着人道主义原则帮我老师的一个朋友做了个小网页,(啥人道不人道的,主要是给钱了),做完之后本来是想偷懒直接把网页扔给他自己部署去吧,结果让我帮忙部署一下,得,偷懒也偷不成了,搞吧 ...
- Windows下判断jdk是否安装好以及环境变量是否配置好
cmd下执行: 1.java 2.javac 3.where java 如果三个都没问题,说明安装成功&环境变量配置成功
- AWT初步—Frame和 Panel
初识 AWT GUI 和 AWT GUI:Graphics User Interface 图形用户界面 AWT:Abstract Window Toolkit 抽象窗口工具集 之前的程 ...
- 利用火车头采集A67手机电影教程一
今天将讲述:利用火车头采集A67手机电影,并导入到网站中,如果你要更多更快的教程,请访问:http://www.it28.cn/category-191.html 现在以A67中的电影中的动作片为例: ...
- JMeter 逻辑控制之While循环控制器(While Controller)
逻辑控制之While循环控制器(While Controller) by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1. 添加While Control ...