学习Vue 环境搭建

最新推荐文章于 2023-05-11 15:20:52 发布

小虎小虎花里胡哨

最新推荐文章于 2023-05-11 15:20:52 发布

阅读量210

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/OX00001111/article/details/115369368

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、vue的引用

1）下载

https://cn.vuejs.org/v2/guide/installation.html

生成版本是压缩后的文件
在这里插入图片描述

2）下载git命令行工具

https://git-scm.com/

在这里插入图片描述

3）下载Node.js 环境

https://nodejs.org/zh-cn/

在这里插入图片描述

4）下载VsCode

https://code.visualstudio.com/

在这里插入图片描述

5）测试node环境

在这里插入图片描述

2、npm包管理工具

https://www.npmjs.com/

1）在安装node.js会自动安装

可在电脑上查看
在这里插入图片描述

2）npm 通过简单命令对第三方包进行管理

npm install 下载所需要的全部包，需要配置package.json
npm uninstall  卸载指定名称的包
npm install 指定包名  安装指定的包
npm  update 更新指定名称的包
npm start 项目启动
npm run build 项目构建

由于npm服务器在国外，使用npm下载软件包速度非常慢，可以切换国内镜像

npm config set registry   https://registry.npm.taobao.org

3、浏览器和扩展

推荐：Chrome浏览器
扩展：vue-devtools

1）安装调试工具vue-devtools

vue-devtools-5.1.1安装

https://github.com/vuejs/vue-devtools/tree/v5.1.1.

1、下载到本地
2、解压、cmd打开目录
3、执行命令
npm config set registry   https://registry.npm.taobao.org
npm install
npm run build

npm config set registry   https://registry.npm.taobao.org
npm install
相当于
cnpm install

构建完成
在这里插入图片描述

2）添加到谷歌浏览器

在这里插入图片描述

4、helloVue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一vue实例</title>
   <!-- 
       导入vue.js
    -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'helloworld'
        }
    });
</script>
</html>

在这里插入图片描述

4、webpack

1)安装weppack

npm config set registry   https://registry.npm.taobao.org
npm install webpack@4.27.x  -g

查看版本
webpack -v
卸载webpack（-g表示全局）
npm uninstall webpack -g

在这里插入图片描述

4、构建Vue项目

1、安装淘宝镜像
npm install  cnpm -g
2、安装vue-cli
cnpm install vue-cli -g
3、vue list  查看可以基于那些模板创建
4、vue init  webpack  项目名
5、进入项目根目录
6、执行npm  install
7、启动项目 npm run dev

日期：2021，04，01