vue.js学习（一）

最新推荐文章于 2023-12-07 18:52:16 发布

loganwz

最新推荐文章于 2023-12-07 18:52:16 发布

阅读量95

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/loganwz/article/details/113928378

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装

下载独立js

详见官网下载

使用CDN

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  }
})
</script>
</body>
</html>

常见的CDN:
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

使用vue脚手架（vue-cli）安装

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack projectname
# 执行后会依次出现项目的一些配置需要确认，根据实际情况选择即可

创建完成后，启动项目

#切换到项目的目录下执行
npm run dev

在这里插入图片描述

vue项目结构

通过脚手架构建的vue项目结构如下

├─build 项目构建(webpack)相关代码
├─config 配置目录，包括端口号等
├─node_modules npm 加载的项目依赖模块
├─src 开发的代码目录
│  ├─assets 图片目录
│  ├─components 组件文件
│  ├─router 路由
│  ├─App.vue 入口文件
│  └─main.js
├─static 静态资源目录（图片、字体等）
├─test 
└─index.html

loganwz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习（一）

安装下载独立js详见官网下载使用CDN<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id=
复制链接

扫一扫