vue的使用(引用/创建vue项目)(一)
在程序开发中,有三种方式创建vue项目,本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛。
一、vue本地引用
在官网下载vue.js,通过script标签引入。
开发版本:https://vuejs.org/js/vue.js 包含完整的警告和调试模式
生产版本:https://vuejs.org/js/vue.min.js 删除了警告,30.90KB min+gzip
注意:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告! vue.min.js,这是一个更小的构建,可以带来比开发环境下更快的速度体验。
二、通过cdn方法引用
unpkg:
https://unpkg.com/vue@2.6.12/dist/vue.js
会保持和 npm 发布的最新的版本一致。(推荐使用)
BootCDN(国内)国内不稳定
https://cdn.bootcss.com/vue/2.2.2/vue.min.js
三、NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
一、安装node.js
1、在官网中安装nodejs最新版本。地址:https://nodejs.org/en/download/,根据自己环境,进行下载安装。
2、安装完成后,进行nodejs版本及npm版本查看。
打开cmd命令行,输入 node -v 和 npm -v,node安装后将会自动安装上npm,但不一定是最新的,可用命令 npm install -g npm,进行最新版本安装。
安装好之后,就可以使用vue-cli进行初始化一个vue项目。
二、vue项目初始化
使用淘宝NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安装 vue-cli
cnpm install vue-cli -g
查看vue-cli是否安装成功
vue list
选定路径
cd C:\Users\Administrator\Desktop\vueproject
新建vue项目
vue init webpack 项目名
(按照提示信息,进行创建项目,一般默认直接选择yes)
打开项目目录:会看到vue的一个初始化结构
build——项目构建(webpack)相关代码。
config——基本配置信息,如端口等,此处初学我们可以默认。
node_modules——npm加载的项目依赖模块。
src——最重要的开发目录,包含:assets(放置一些图片,如logo等)、 components( 组件文件夹)、App.vue( 项目入口文件)、main.js:(项目的核心文件)
static——静态资源目录。在打包发布后将用于存放静态资源。
test——初始测试目录,可以删除。
index.html ——首页入口文件。
package.json ——项目配置文件,此处初学我们可以默认。
.xxxx文件 ——一些配置文件,包括语法配置,git配置等,此处初学我们可以默认。
README.md 档,为markdown 格式 。
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置,里面有一些插件,这些插件的作用是代码的转换
|-- .editorconfig // 编译器的配置,定义代码格式
|-- .eslintignore //忽略语法检查的目录文件
|-- .eslintrc.js //编译规则配置文件,规则定制文件,规则编译不过的时候可以在这里配置为0
|-- .gitignore // git上传需要忽略的文件格式,
|-- favicon.ico // link图标
|–.postcssrc.js
|-- index.html // 入口页面
|-- package.json // 项目基本信息如:可以配置script脚本 ^上箭头代表可以安装当前版本及以上的版本
|-- README.md // 项目说明
三,启动运行项目
进入项目根目录,运行命令:npm run dev
浏览器:http://localhost:8080/
解决vue不能自动打开浏览器的问题:打开config ==> index.js 配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
vue的使用(引用/创建vue项目)(一)相关推荐
- 【Vue工程】001-Vite 创建 Vue-TypeScript 项目
[Vue工程]001-Vite 创建 Vue-Ts 项目 文章目录 [Vue工程]001-Vite 创建 Vue-Ts 项目 一.环境 二.创建项目 1.pnpm 创建 Vite 项目 2.设置项目名 ...
- vue ui工具来创建vue项目(IDEA)
使用vue ui工具来创建vue项目(IDEA) 1.下载node.js 首先我们上node.js官网, 下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境 2.检查是否 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- Vue学习笔记一 创建vue项目
1:安装Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.可以搜索Node.js的官网下载,安装完成后,打开命令提示符cmd.exe,输入node ...
- 使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目 什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- Vue学习(三)—— vue脚手架
文章目录 第三部分 使用vue脚手架 一.介绍及安装 1.概述 2.安装步骤 3.备注 4.模板项目结构 5.关键代码 5.1 index.html 5.2 main.js 5.3 App.vue 5 ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- Vue知识点整理(三)- Vue脚手架(1)- 初始化Vue脚手架、简单分析Vue脚手架结构
目录 一.初始化Vue脚手架 二.简单分析脚手架结构 一.初始化Vue脚手架 第一步(仅执行一次):全局安装 @vue/cli 在 命令提示符内输入(命令提示符 可由 win+R 调出 运行 界面,输 ...
最新文章
- left join 不重复_R语言ETL工程:连接(join)
- 控件不能与用户交互的原因
- 安装不文件不完全_冬日不偷懒 跑步机不完全使用指南
- #8ms平台,是一个支持ESP32/Sigamastar201、202/RK等硬件的开发平台,现平台Slogan有奖征集# 我们的广告语,将由你们来定!
- R语言学习 - 热图美化 (数值标准化和调整坐标轴顺序)
- 不通过ios审核 安装苹果app php,iOS APP审核被拒的解决之道(2.1)
- mysql 设置默认值_为什么 Flink 无法实时写入 MySQL?
- 《C++沉思录 第2版》
- 产品经理培训还好找工作吗?
- 复现awvs——POODLE 攻击(带 CBC 密码套件的 SSLv3—CVE-2014-3566)
- Lesson 3 Please send me a card 请给我寄一张明信片
- 计算机操作系统——银行家算法
- Shiro 安全框架
- uniapp 微信云开发静态网站和云函数跳转小程序
- (7)Artemis传输配置
- Jackknife test 是什么
- 人体姿态估计-Human Pose Estimation (2021)
- 如何修改京东绑定的手机号,看这里就够了,怎样更改京东绑定的手机号
- Springboot 关闭或绕过 jwt用户验证
- 区块链测试(二):区块链测试
热门文章
- 工业4.0时代,工业交换机在智能电网建设中有什么作用?
- Pcm设备2M通道,E1的基础知识介绍
- 网络延长器分为哪几类?其应用领域有哪些?
- 什么是光纤转换器?光纤转换器转换类别介绍
- 工业交换机的价格为什么有高低之分?
- 【渝粤题库】陕西师范大学400010 当代西方社会思潮评析 作业(专升本)
- 【工业级串口服务器E810-DTU】RS485/RS232转以太网,双向透明传输
- html 垂直线代码,html – Bootstrap 3水平和垂直分隔线
- java 伴随矩阵_C#计算矩阵的逆矩阵方法实例分析
- java list 字段去重_如何实现java8 list按照元素的某个字段去重