安装运行环境(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. svg形状相关的学习(二)

    _ 阅读目录 一:线段 二:笔画特性 1. stroke-width 2. stroke-opacity 3. stroke-dasharray 属性 三:常见的形状 1. 矩形 2. 圆角矩形 3. ...

  2. hdu5285-wyh2000 and pupil-(染色法二分图判定)

    http://acm.hdu.edu.cn/showproblem.php?pid=5285 题意:把互不认识的人分到两个组,第一组人数尽可能多. 题解:把互不认识的人连起来,当作二分图,二分图可能有 ...

  3. Pandas | 14 统计函数

    统计方法有助于理解和分析数据的行为.可以将这些统计函数应用到Pandas的对象上. pct_change()函数 系列,DatFrames和Panel都有pct_change()函数.此函数将每个元素 ...

  4. 两次bfs求树的直径的正确性

    结论:离树上任意点\(u\)最远的点一定是这颗树直径的一个端点. 证明: 若点\(u\)在树的直径上,设它与直径两个端点\(x,y\)的距离分别为\(S1\).\(S2\),若距离其最远的点\(v\) ...

  5. 安装Ruby 2.3.0

    安装最新的redis集群需要用到的rb脚本要ruby2.3.0版本,centos7默认的是2.0.0,很显然报错不行,所以安装呗,使用rvm安装,安装步骤如下: yum -y install curl ...

  6. android studio 配置相关问题

    1:Unknown AVD name, use -list-avds to see valid list. 下午1:26    Emulator: emulator: ERROR: Unknown A ...

  7. IntelliJ IDEA 插件推荐

    1.GenerateAllSetter 自动生成类set方法 2.GsonFormat 根据JSON创建实体 3.Lombok plugin 简化代码 4. .ignore 忽略git提交文件 5.A ...

  8. nginx 日志之 access_log过滤

    一个网站,会包含很多元素,尤其是有大量的图片.js.css等静态元素.这样的请求其实可以不用记录日志. 配置示例: location ~* ^.+\.(gif|jpg|png|css|js)$ { a ...

  9. TCGA简易下载工具 SangerBox

    下载地址:http://sangerbox.com/ https://shengxin.ren/article/208 Understanding TCGA mRNA Level3 analysis ...

  10. java web开发入门汇总

    servlet 用java语言开发动态资源网站的技术,在doGet方法中拼接显示html,在doPost方法中提交数据.类似于.net的ashx技术. servlet生成的class文件存放在tomc ...