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样式

原文地址:https://www.cnblogs.com/sxgxiaoge/p/9196784.html

时间: 2024-10-10 04:55:53

Vue-cli的安装步骤详细版本的相关文章

@vue/cli 3 安装搭建及 webpack 配置

首先卸载旧版1 npm uninstall vue-cli -g //or 2 yarn global remove vue-cli 再次安装 1 npm install -g @vue/cli 2 //or 3 yarn global add @vue/cl 查看版本 vue --version //or vue -V 创建项目vue create  my-project //项目名// Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作.  //你必须通过  

在虚拟机上安装win 7操作系统的安装步骤详细截图

首先把所有虚拟机需要的东西贡献出来地址:我的百度网盘里面包括各种ISO映像文件,也就是操作系统,可以选择性的下载. 鄙人的截图软件和Windows激活软件地址:http://pan.baidu.com/s/1i37qRfZ 下载之后首先点击文件夹里面的VMware双击安装包进行安装软件 下面是安装操作系统实验的要求: 在安装有VMware虚拟机中完成如下任务(包含关键步骤.配置命令及验证结果的截图). 1. 创建一个安装Windows 7的虚拟机环境,其中硬盘一块40GB,内存512MB,两块网

vue开发环境安装步骤

前提:vue开发前提是安装好nodejs后,在nodejs环境下运行 1.npm工具在国内的网络环境下比较慢 推荐使用淘宝npm镜像https://npm.taobao.org/ 使用以下命令安装cnpm,以后就可以用cnpm来代替npm: npm install -g cnpm --registry=https://registry.npm.taobao.org 2.cnpm -v 查看当前cnpm安装版本 3.cnpm install -g vue-cli 安装脚手架(-g全局安装在系统的n

Nginx安装(详细版本)

Nginx安装文档 前言: 最近,系统部署人员那边,让我们给写一个傻瓜式的Nginx安装过程.所以就有了这个文档,本着独乐乐不如众乐乐,就分享一下.我觉得对入门小白来说,有图,乃至运行过程图,是很重要的(避免运行出问题了而不自知). 当然,这只是部署人员的V1手册,后来他们觉得太麻烦了,就有了yum安装,再就是容器部署等.后面有机会,会写出来的. 同样的话再次提示,如果觉得图片太小,不够清晰,请把图片单独打开(简单的,就是拖一下图片,浏览器会自动打开一个新的标签页,放置图片).原图片是很清晰的.

vue-cli 3.x安装配置步骤详细说明

一.vue-cli 3.x简单介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统:是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vue 项目. CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:

【Vue CLI】从安装到构建项目再到目录结构的说明 𰅨

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

CENTOS7 安装openstack mitaka版本(最新整理完整版附详细截图和操作步骤,添加了cinder和vxlan)

CENTOS7 安装openstack mitaka版本(最新整理完整版附详细截图和操作步骤,添加了cinder和vxlan,附上个节点的配置文件) 实验环境准备: 为了更好的实现分布式mitaka版本的效果.我才有的是VMware的workstations来安装三台虚拟机,分别来模拟openstack的controller节点 compute节点和cinder节点.(我的宿主机配置为 500g 硬盘 16g内存,i5cpu.强烈建议由条件的朋友将内存配置大一点,因为我之前分配的2g太卡.) 注

mysql5.6版本安装步骤详解

mysql5.0之后的版本与之前的版本有一些区别,我们在安装的时候如果用安装老版本的方法会遇到各种问题,其中最主要的区别就是配置文件my.cnf 详细安装步骤这里就不多说了,与老版本的安装步骤一样的,如有需要可以参考笔者另外一篇博文 这里主要讲解配置文件的不同之处,我们在安装过程中,到了要拷贝配置文件的那一步会遇到错误,我们会发现在目录/usr/local/mysql/support-files/(该路径可以自己定义)下没有my_large.cnf这个配置文件,只有my.cnf或者my-defa