vue - cli 脚手架安装
一、 node安装
1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本);
2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/
注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;
二、 vue-cli 全局安装
命令行执行 : npm install -g vue-cli // 加-g是安装到全局
安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;
三、初始化项目
执行命令: vue init webpack demo(你新建的项目名称/文件名称)
执行之后将会 自动初始化一个文件夹 :demo
手动打开demo文件夹 可以看到 已经初始化好了 一个基本的项目:
四、启动项目
npm run dev 启动项目
继续执行: cd demo (这是进入到demo文件夹的命令)
然后执行 安装 :npm install
注: npm install 执行可以进行vue已经vue的插件安装,在第三步的时候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;
安装完成之后再执行命令: npm run dev
整个项目就已经启动了:
五、项目文件配置介绍
build 和 config 是关于webpack的配置,里面包括一些server,和端口;
node_modules: 安装依赖代码库;
src : 存放源码;
static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。
.babelrc:把es6文件编译成es5
.babelrc文件{"presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件"plugins": ["transform-runtime"],//把es6的方法做转换"comments": false //false表示转换后代码不生成注释 } .editorconfig:编辑器的配置
.editorconfigcharset = utf-8 //编码 indent_style = space //缩进风格,基于空格做缩进 indent_size = 2 //缩进大小是2格 end_of_line = lf //换行符的风格 insert_final_newline = true //当你创建一个文件,会自动在文件末尾插入新行 trim_trailing_whitespace = true //自动移除行尾多余空格
.eslintignore 忽略语法检查的目录文件
就是忽略对build/*.js和 config/*.js
package.json :
{"name": "demo","version": "1.0.0","description": "demoApp","author": "","private": true,"scripts": { /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src"},"dependencies": { /*项目的依赖*/"vue": "^2.2.2","vue-router": "^2.2.0"},"devDependencies": { //编译需要的依赖.......................},"engines": {"node": ">= 4.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"] }
入口文件: index.html 和 main.js
转载于:https://www.cnblogs.com/yearshar/p/11412971.html
vue - cli 脚手架安装相关推荐
- Vue2.x 核心基础(Vue概述,Vue基本使用,@vue/cli脚手架,Element-UI 的基本使用,Vue模板语法)
1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
- 猿创征文|【Vue五分钟】 Vue Cli脚手架创建一个项目
目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...
- Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口 命令 ...
- Vue CLI 脚手架详解:快速构建 Vue.js 项目的利器
目录 一.安装和创建项目 二.项目结构 三.开发和构建 四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
- 如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号 方法一:直接在项目的package.json文件,找到dependencies就能看到了 方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
- Windows PowerShell安装指定版本vue/cli脚手架失效解决办法;vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
mac搭建vue项目看这篇 打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...
- #VUE CLI 脚手架的安装及初识脚手架(一)
目录 vue cli 安装vue cli cli是什么? 1.CLI英文为Command-Line Interface,翻译为命令行工具,通俗来讲为脚手架. 2.使用vue-cli可以快速搭建Vue开 ...
- 1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
- 前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
最新文章
- 这三所985,博士生毕业,可能不再要求发表论文!
- adb install apk
- 云基础设施公司 HashiCorp 宣布完成 D 轮 1 亿美元融资
- 基于Netty的http服务器
- 宝塔mysql远程链接_宝塔apache启动失败:报错 AH00526: Syntax error on line 解决方案
- Zuul异常Zuul spring cloud zuul com.netflix.zuul.exception.ZuulException GENERAL
- 背靠福特的Argo无人车发生严重事故,两名乘客已送往医院
- Linux下查看CPU信息、机器型号等硬件信息命令
- vue识别不了.ico后缀的图片,显示[object Module]
- mysql5.7.12无法启动_MySql5.7.12免安装版配置以及服务无法启动问题解决方法
- 基于Profinet网络的风力发电机组齿轮箱温度采集系统
- 小程序服务器装rsshub,RssHub 部署
- 微型计算机的一般结构,微型计算机的基本结构
- 机器学习中的主动学习实现_我如何使用机器学习来帮助实现正念
- docker入门课程
- 一、H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- Android ViewFliper
- 从机器学习到大模型(零基础)
- 图论期末复习(《图论机器应用》——朴月华)
- JavaScript DOM加强(佟刚)
热门文章
- java获取文件列表_java获取指定目录中的文件列表
- linux安装mysql phpmyadmin_ubuntu mysql远程连接+phpmyadmin安装
- php全选按钮怎么写,PHP中的“全选”复选框,其中包含header.php
- mysql 酒店管理设计_酒店管理系统的设计与实现(Myeclipse,MySQL)
- iis开启php验证码,php结合GD库实现中文验证码的简单方法
- pycharm remote 远程项目 同步 本地_利器:PyCharm本地连接服务器搭建深度学习实验环境的三重境界...
- vue php企业站案例,vue 开发企业微信整合案例分析
- 计算机应用能力文字录入,2017全国专业技术人员计算机应用能力考试题库-Excel,Word,XP.pdf...
- android系统三防机,这才是真正给老人设计的智能手机:三防+安卓系统+超大音量,AGM H2...
- devc++ 运行时黑屏一闪而过