Vue-cli的安装步骤详细版本
https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack
条件:
node在4.以上,npm在3以上
安装步骤:
1、cmd打开命令行窗口
2、输入cnpm install vue-cli -g,然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)
3、安装结束后输入vue 如果显示版本号继续下一步操作
4、运行vue init webpack demo(注:项目名称)回车
5、显示Project nanme 目录名 回车 project description 后面可以写上描述,或者直接回车
Author 后面可以写作者也可以回车
6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选Y
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9、Setup e2e tests with Nightwatch? 选n
10、这个时候在你创建的目录下就有你的目录了,然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件,如果这个文件夹没有那么项目是没办法跑
起来的
11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用,启动成功它会自动打开一个vue页面
12、每次这样启动是很麻烦的,用开发工具加载整个项目,里面有个package.json,它我整个项目的配置和信息的描述,里面有个scripts,这是定义的一些脚本,刚才用的就是里面的dev,它会执行后面的东西,就是用node跑一个JSON文件
13、在项目中,右击package.json选择show npm scripts,显示npm后,双击命令即可
main.js的介绍
el是挂载点,router是路由
App.vue 是整个文件的入口,有三部分,template模板 script 逻辑 style样式
Vue-cli的安装步骤详细版本的更多相关文章
- 超详细oracle 11g安装步骤 win版本
1. 打开网址: https://edelivery.oracle.com 使用oracle 任意账号登录 账号:2696671285@qq.com 密码:Oracle123 感谢来自某位好心大佬的共 ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- TFS2008 安装图解(详细版本)(转载)
由于公司准备上TFS,最近开始学习搭建TFS环境,并为同事讲解TFS的使用,在虚拟 机中搭建测试环境,遇到了很多问题,总结成一篇博客,跟大家交流一下: 我是从微软公司官方网站下载的TFS 2008 1 ...
- PowerDesigner 15.1 安装步骤详细图解及破解
准备工作: 下载 PowerDesigner 15.1 的安装文件和破解文件 PowerDesigner 15.1 下载地址:http://pan.baidu.com/share/link?share ...
- Nginx安装(详细版本)
Nginx安装文档 前言: 最近,系统部署人员那边,让我们给写一个傻瓜式的Nginx安装过程.所以就有了这个文档,本着独乐乐不如众乐乐,就分享一下.我觉得对入门小白来说,有图,乃至运行过程图,是很重要 ...
- CentOS 7 中英文桌面安装步骤详细图解
https://www.cnblogs.com/haoliyou/p/7694868.html
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
随机推荐
- Mac OS 网络设置教程 wifi设置与宽带设置详解
虽然所有设备连接无线网络的步骤都相差无几,但是Mac与windows系统还是不相同的,那么,苹果Mac怎么连接无线网络呢?针对此问题,本文就为大家介绍Mac网络的设置教程,有兴趣的朋友们可以了解下.如 ...
- 【leetcode】726. Number of Atoms
题目如下: 解题思路:我用的是递归的方法,每次找出与第一个')'匹配的'('计算atom的数量后去除括号,只到分子式中没有括号为止.例如 "K4(ON(SO3)2)2" -> ...
- 英语单词forwarding
forwarding 来源——xshell的远程连接 [c:\~]$ Connecting to ... Connection established. To escape to local shel ...
- BZOJ 4484: [Jsoi2015]最小表示(拓扑排序+bitset)
传送门 解题思路 \(bitset\)维护连通性,给每个点开个\(bitset\),第\(i\)位为\(1\)则表示与第\(i\)位联通.算答案时显然要枚举每条边,而枚举边的顺序需要贪心,一个点先到达 ...
- [CSP-S模拟测试]:虎(DFS+贪心)
题目传送门(内部题15) 输入格式 第一行一个整数$n$,代表点数接下来$n-1$行,每行三个数$x,y,z$,代表点$i$与$x$之间有一条边,若$y$为$0$代表初始为白色,否则为黑色,若$z$为 ...
- 多列布局(column)
容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...
- asp label居中
https://stackoverflow.com/questions/25245839/align-a-label-to-the-right-using-asp-net Try something ...
- h5调用微信支付功能
支付按钮的点击事件 $(´.Save_Patient_Msg´).click(function(){ $(´.Save_Patient_Msg´).off(´click´); var hrdfId = ...
- vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...
- 将windows下的文件上传到Linux服务器上
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lx_Frolf/article/deta ...