Vue笔记

学习

在线文档:https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <!-- 生产环境版本,优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    #这里就类似于是vue里面的
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
</script>
</html>

安装

vue需要核心依赖node.js

node.js下载地址:https://nodejs.org/zh-cn/download/current/

设置node安装源

# 查看自己的安装源
npm config get registry
 
# 更换npm源为国内淘宝镜像
npm config set registry http://registry.npm.taobao.org/
 
# 或者更换为国内npm官方镜像
npm config set registry http://registry.cnpmjs.org/
 
# 还原npm源
npm config set registry https://registry.npmjs.org/

初次安装vue-cli3脚手架

npm install -g@vue/cli

创建初始vue-cli3的项目

vue create my-project

vue学习教程推荐:https://www.cnblogs.com/jcdxh/p/11703199.html

跑项目

运行项目

vue-cli2

npm run dev

vue-cli3

npm run serve

编译项目

vue-cli2

npm run build

vue-cli3

npm run build

axios使用

安装axios

npm install --save axios vue-axios

引入axios

import axios from 'axios'

使用MD5加密

安装

npm install --save js-md5

引入

import md5 from 'js-md5'

使用

md5('holle')  // bcecb35d0a12baad472fbe0392bcc043

或者在main.js文件中将md5转换成vue原型

port md5 from 'js-md5';
Vue.prototype.$md5 = md5;

在需要用到的页面里引用

 this.$md5('holle') // bcecb35d0a12baad472fbe0392bcc043

使用Element-ui框架

下载官方框架

https://github.com/ElementUI/element-starter

安装依赖

npm install

运行模板

npm run dev

此时在浏览器打开

http://localhost:8080

即可看到欢迎页。

安装element-ui

npm i element-ui@next -D

创建vue3的项目出现没有环境变量配置
npm install -g “@vue/cli”

更换node镜像源为淘宝
npm config set registry https://registry.npm.taobao.org

配置roter路由
https://blog.csdn.net/qq_45091821/article/details/106190705

vue项目引入高德地图

淘宝镜像的:cnpm install vue-amap –save

安装yarn
npm install -g yarn

禁用掉空格等报错
在package.js里找到rules
添加或修改
“no-console”:”off”,//在这禁止掉console报错检查
“no-irregular-whitespace”:”off”//这禁止掉 空格报错检查

笔记 记录学习的笔记

博客/csdn记录学习遇到的问题

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇