vue搭建项目前奏曲——vue-cli
vue-cli是快速构建这个单页应用的脚手架,这个可是官方的。官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack、Node.js、npm等等,很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的。一下是构建过程。
1、使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了),在cmd中输入一下命令: npm install -g vue-cli
2、安装完成后,创建自己的工作空间,在cmd切换至刚刚创建好的工作空间,如果已经有工作空间,直接切换到工作空间即可。使用命令创建项目: npm init webpack 项目名称
命令输入后,会进入安装阶段,需要用户输入一些信息:
Project name (vuetest) ——项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
Project description (A Vue.js project) ——项目描述,也可直接点击回车,使用默认名字
Author (........) ——作者,不用说了,你想输什么就输什么吧
接下来会让用户选择
Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
Install vue-router? (Y/n)——是否安装vue-router,这是官方的路由vue-router官网,大多数情况下都使用,这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n)——是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,一般项目中都会使用。ESLint官网
接下来也是选择题Pick an ESLint preset (Use arrow keys)——选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint
Setup unit tests with Karma + Mocha? (Y/n)——是否安装单元测试,我选择安装
Setup e2e tests with Nightwatch(Y/n)?——是否安装e2e测试 ,我选择安装
完成!(一般情况,一路回车下来就好)
简单说一下这个目录:
vue搭建项目前奏曲——vue-cli的更多相关文章
- Vue 搭建项目
Vue 搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...
- vue搭建项目
vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...
- 搭建项目(Vue学习笔记一)
一.在搭建Vue项目之前首先要搞明白以下几个问题 1.Vue.js是什么 vue.js是一个脚本库. 2.webpack 模块打包机,分析项目结构,找到JavaScript模块以及其他的一些浏览器不能 ...
- vue搭建项目之设置axios
首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...
- vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...
- webpack+vue-cli搭建项目 (vue项目重构三)
在自己的电脑下载了npm 与 node的情况下 可使用vue-cli快速构建vue项目执行命令如下: # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 &q ...
- 使用vue搭建项目(创建手脚架)
第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...
- vue搭建项目之设置代理
前面将项目页面.axios.组件等都准备好了,现在就差设置代理了: 首先在config下新建两个文件,分别叫做dev.uri.js和prod.uri.js,代码为: module.exports = ...
- 关于vue搭建项目运行出行的错误问题,简直是大坑啊
解决方法简单粗暴,非常简单粗暴 直接在根目录新建一个test文件夹就可以搞定,用来放置配置文件的 折腾了我一上午啊
随机推荐
- 201521123111《Java程序设计》第13周学习总结
本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.bai ...
- chrome保存网页为单个文件(mht格式)
网页归档(英语:MIME HTML或MIME Encapsulation of Aggregate HTML Documents,又称单一文件网页或网页封存盘案)为以多用途互联网邮件扩展格式,将一个多 ...
- JavaScript随笔
文档模式 主要模式2中混杂模式和标准模式. 1混杂模式,混杂模式会让IE的行为与(包含非标准特性的)IE5相同. 2标准模式,标准模式让IE的行为更接近标准行为. 准标准模式:通过过渡型或框架集型触发 ...
- C#参数详解
参数 可选参数与命名参数 设计方法时,我们可以为部分参数设置默认值,在方法调用时就可以不提供该参数,使用其默认值.此外,调用方法时可以通过指定参数名的方式来传递参数.话不多说,请看以下示例: stat ...
- mybatis 自动生成代码(mybatis generator)
pom.xml 文件配置 引入 mybatis generator <properties> <mysql.connector.version>5.1.44</mysql ...
- (二)Java数组特性总结,你真的了解数组吗?
一.数组的特殊性 (一)数组标识符是一个引用,指向堆中创建的一个真实对象,这个对象(数组)保存了指向保存其他对象的引用. (二)数组中保存引用类型时保存的是对象引用,基本数据类型数组保存基本数据的值. ...
- oracle安装时,条件检查不通过解决办法
1.开始菜单→ 运行:输入regedit,打开注册表 2.依次点开HKEY_LOCAL_MACHINE>>SYSTEM>>CurrenControlSet>>ser ...
- Maven(五)之Maven配置阿里云镜像飞快下jar包
用过Maven的人都知道Maven对于依赖的管理让我们程序员从此远离了自己去在项目中把需要的jar包导入到项目中,但是因为中央仓库是在国外的,所以在我们从中央仓库下载依赖的时候, 我们发现下载速度真的 ...
- 匹配替换第n个字符串
var name = "questions[0][question]",i=0; name.replace(/\[.+?\]/g, function(match, pos, ori ...
- 分享一个图片上传插件(TP5.0)
效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间.一.下载附件 地址:https://pan.baidu.com/s/1bpxZhM3 ...