安装运行环境（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. Centos7离线部署docker

    下载docker离线包 wget https://download.docker.com/linux/static/stable/x86_64/docker-19.03.5.tgz 解压 tar -x ...

  2. JAVA并发-join

    概念 join方法,一种特殊的wait,当前运行线程调用另一个线程的join方法,当前线程进入阻塞状态直到调用join方法的线程结束,再继续执行. 一般情况下,都是主线程创建一个子线程,子线程调用jo ...

  3. python基础之六：编码简介以及python3中的编码

    1.常见的四种编码方式的编码过程: ascii A : 00000010 8位 一个字节 unicode A : 00000000 00000001 00000010 00000100 32位 四个字 ...

  4. TCP连接和连接释放（TCP的三次挥手和四次握手）

    TCP的运输连接管理 TCP是面向连接的协议.运输连接是用来传送TCP报文的.TCP运输连接的建立和释放是每一次面向连接的通信中必不可少的过程.因此,运输连接就有三个阶段,即:连接建立.数据传送和连接 ...

  5. JOI2013-2019

    代码自己去LOJ看 JOI2013 彩灯 把序列划分成若干极长交替列,那么最优的方案一定是将一个极长交替列翻转使得连续的三个极长交替列合成一个.计算相邻三个极长交替列长度的最大值即可. 搭乘IOI火车 ...

  6. ZROI 暑期高端峰会 A班 Day2 线性代数

    高斯消元 很普及组,不讲了 当主元没有逆的时候可以辗转相除. 如果也没有带余数除法--没救了 逆矩阵 我们定义矩阵 \(A\) 的逆矩阵为 \(A^{-1}\),满足 \(AA^{-1}=A^{-1} ...

  7. Python基于tkinter.messagebox实现简易消息框、对话框

    库导入: import tkinter import tkinter.messagebox 有关提示框: tkinter.messagebox.showinfo(title=None, message ...

  8. CentOS7.6安装MYSQL8.0

    1.一般CentOS默认安装了mariadb,所以先查看是否安装mariadb,如果安装就需要先卸载mariadbrpm -qa|grep mariadbrpm -e mariadb-libs --n ...

  9. V8 引擎如何进行垃圾内存的回收？

    JS 语言不像 C/C++, 让程序员自己去开辟或者释放内存,而是类似Java,采用自己的一套垃圾回收算法进行自动的内存管理.作为一名资深的前端工程师,对于JS内存回收的机制是需要非常清楚, 以便于在 ...

  10. 在 Debian 上的 SQL Server 的安裝指引

    我想在 linux 环境下尝试一下 Microsoft SQL Server,但是微软只发布了针对 Red Hat,SUSE,Ubuntu 和 Docker 引擎的.我平时习惯使用 Debian, U ...