安装运行环境(node和npm)

安装vue-cli(查看是否安装成功vue -V)

安装webpack

新建项目

1、vue init webpack 项目名称

2、配置项目有关的信息(项目名称,开发者,描述,安装路由,使用eslint代码规范,测试单元)

3、下载依赖模块后会出现启动项目的提示命令

4、进入项目的文件夹下,,使用npm run dev来运行项目

5、运行完成后根据提示的地址进行项目的访问

6、到此项目就创建完成了,以上是页面中显示的内容

8、主要修改的是src中的文件

Assets中存放静态资源

Components中存放当前项目中用到的组件

Router中存放涉及的路由配置

App.vue当前项目的主页面组件

Main.js当前项目的vue实例创建,可以将实例的配置信息放在当前文件中

9、组件的文件中主要包含三个部分,template、script、style

Template标签中放html结构(必须有且只有一个跟标签)

Script中存放当前组件的数据、生命周期函数、计算属性、侦听器、方法等

Style中放样式,使用scoped可以使样式只作用于当前组件

10、路由的配置,使用path、name、component来只能路由对应的地址,名称和指定的组件,嵌套路由通过child中配置下级路由来实现,child的值是数组

vue使用vue-cli创建项目的更多相关文章

  1. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  2. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  3. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  4. vue搭建环境并创建项目

    1.>npm install @vue/cli -g 2.创建项目A a.>vue ui b.在弹出的管理界面创建项目 或 a.npm install -g @vue/cli-init b ...

  5. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  6. VUE环境安装和创建项目

    1.首先要安装nodejs和npm. 下载nodejs安装,下载地址:https://nodejs.org/en/ 安装很简单一路next即可. 安装完成后可以在cmd窗口输入node -v 和 np ...

  7. vue(2)创建项目

    1.创建项目 cmd到自己指定目录下,执行 vue init webpack-simple hello-vue 2.安装项目依赖 cd hello-vue cnpm install 3.运行该项目,测 ...

  8. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

  9. Electron+Vue – 基础学习(1): 创建项目

    Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...

  10. vue/cli创建项目过程

            ①vue create demo    vue版本:3.9.3,node版本:12.8.0         ②Manually select features         ③Bab ...

随机推荐

  1. Comet OJ 夏季欢乐赛 完全k叉树

    完全k叉树 https://cometoj.com/contest/59/problem/A?problem_id=2712 题目描述 欢迎报考JWJU!这里有丰富的社团活动,比如为梦想奋斗的ACM集 ...

  2. 1. Spring Cloud Greenwich SR2 概览

    Spring Cloud provides tools for developers to quickly build some of the common patterns in distribut ...

  3. GitHub for mobile 来了,码农苦逼了!

    北京时间 2019 年 11 月 14 日 GitHub Universe 2019 大会上,GitHub 正式发布了 GitHub for mobile,即 GitHub 的移动版本,支持 iOS ...

  4. Log4j Threshold指定输出等级&&Append指定是否追加内容

    Threshold指定输出等级 有时候我们需要把一些报错ERROR日志单独存到指定文件 ,这时候,Threshold属性就派上用场了: Threshold属性可以指定日志level Log4j根据日志 ...

  5. Kubernetes集群之清除集群

    清除K8s集群的Etcd集群 操作服务器为:192.168.1.175/192.168.1.176/192.168.1.177,即etcd集群的三台服务器.以下以192.168.1.175为例子. 暂 ...

  6. k8s之发布管理架构图01

    k8s发布管理所用到的组件

  7. 通过inspect在电脑的Chrome上查看手机上的H5

    首先打开手机的开发者模式,(在连续点击7次版本号,系统会提示已经打开开发者模式) 然后打开一个手机浏览器. 然后在电脑上打开chrome://inspect/#devices.这是就会出现手机上浏览器 ...

  8. 使用 KVO 可能会拖慢启动速度

    问题  在某一次启动速度优化中,发现最开始的某个 runLoop 中,一个runLoop 耗时很长.发现一个 KVO 变量的初始化消耗了13ms之久,这对启动速度是不可接受了. 源码分析 用 Ins ...

  9. Python内网渗透扫描器Ladon

    Ladon Scanner For Python PyLadon 目前python版功能较少,无论在Windows还是Linux系统性能以及速度均也比不上Ladon.exe 唯一的优点是跨平台,后续会 ...

  10. SQL Server 10分钟理解游标

    概述 游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式 ...