vue使用vue-cli创建项目
安装运行环境(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创建项目的更多相关文章
- Vue.js用脚手架创建项目
安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- vue搭建环境并创建项目
1.>npm install @vue/cli -g 2.创建项目A a.>vue ui b.在弹出的管理界面创建项目 或 a.npm install -g @vue/cli-init b ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- VUE环境安装和创建项目
1.首先要安装nodejs和npm. 下载nodejs安装,下载地址:https://nodejs.org/en/ 安装很简单一路next即可. 安装完成后可以在cmd窗口输入node -v 和 np ...
- vue(2)创建项目
1.创建项目 cmd到自己指定目录下,执行 vue init webpack-simple hello-vue 2.安装项目依赖 cd hello-vue cnpm install 3.运行该项目,测 ...
- vue环境搭建及创建项目
安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...
- Electron+Vue – 基础学习(1): 创建项目
Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...
- vue/cli创建项目过程
①vue create demo vue版本:3.9.3,node版本:12.8.0 ②Manually select features ③Bab ...
随机推荐
- Android APK开发 Drawable文件夹下的自定义Drawable文件
版本:2018/2/11 Drawable的分类 自定义Drawable SVG矢量图 个人总结的知识点外,部分知识点选自<Android开发艺术探索>-第六章 Drawable 1.Dr ...
- 2019牛客国庆day3-G &CF1238E
牛客G: 给定大小为N的数组a[],给定M组关系,让你重排a[],使得sum{M队关系的绝对值之差}最小.首先将a排序,然后依次把a填入数组. 假设i在二进制下有x个1,用dp[i]更新dp[i|(1 ...
- 解决opencart设置SSL后评论不能翻页的问题
为了网站的安全和seo,我们为客户的opencart网站添加了SSL加密实现https,并设置了301跳转使http跳到https,基本所有的功能都完好,就是有一点评论分页无法加载分页,去分析了链接源 ...
- mybatis框架,使用foreach实现复杂结果的查询--循环List集合方式
需求,根据用户角色列表 查询用户列表信息 之前我们传入的参数是Array,一个数组的形式,现在我们传入的是一个List集合,其他条件没有变化. /** * 需求:传入指定的用户角色,用户角色有1-n ...
- CentOS7 安装 vsftpd 服务
CentOS7 安装 vsftpd 服务 0.FTP简介 FTP服务是一个跨平台的文件共享解决方案 0.1.FTP两种模式的区分:服务端的主被动模式 1)ftp一般分为两种模式,PORTFTP和PAS ...
- Flask常用实列化参数
Flask中实列化配置: app = Flask( __name__, template_folder=’temp’ , ...... ) >template_folder = "te ...
- 网络协议 17 - HTTPDNS
全球统一的 DNS 是很权威,但是我们都知道“适合自己的,才是最好的”.很多时候,标准统一化的 DNS 并不能满足我们定制的需求,这个时候就需要 HTTPDNS 了. 上一节我们知道了 DNS ...
- Android 从零编写一个带标签 TagTextView
最近公司的项目升级到了 9.x,随之而来的就是一大波的更新,其中有个比较明显的改变就是很多板块都出了一个带标签的设计图,如下: 怎么实现 看到这个,大多数小伙伴都能想到这就是一个简单的图文混排,不由得 ...
- Spring Cloud @RefreshScope 原理是什么?
要清楚RefreshScope,先要了解Scope Scope(org.springframework.beans.factory.config.Scope)是Spring 2.0开始就有的核心的概念 ...
- bat修改文件内容
#file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...