== 开发工具idea,前端使用nodejs,项目构建工具npm,使用vue各个模块和组件==

1.nodejs安装

在这里插入图片描述
安装简单,直接安装,安装过程一般是自动配置了环境变量的,
windows+r—>cmd打开命令输入以下命令查看版本信息
node -v
在这里插入图片描述
npm -v在这里插入图片描述

升级npm版本,(注意都是英文字母和字符)
npm install npm@latest –g

2.创建前端项目,取名vue_father

创建一个空项目
在这里插入图片描述
取名
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
项目层级结构
在这里插入图片描述

3.开始操作

进入vue_son目录
在这里插入图片描述
在这里插入图片描述
执行初始化操作
npm init -y
在这里插入图片描述
在这里插入图片描述

配置终端cmd.exe
在这里插入图片描述

4.安装vue模块

在安装vue模块之前,得先进入vue_son目录下,执行操作命令
输入npm命令npm install vue
在这里插入图片描述
得到项目结构和模块
在这里插入图片描述
查看工程中有哪些模块
npm ls
在这里插入图片描述

5.测试环境是否安装成功

新建一个html文件,键入以下内容

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue hello</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
   {{name}}====={{sex}}
  </div>
<script type="text/javascript">
    var v =new Vue({
        el:"#app",
        data:{
            "name":"xxx",
            "sex":"小男孩"
        }
    });
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
得到如下结果,说明vue模块安装成功且运行
在这里插入图片描述
就可以通过vue模块写前端项目了

6.项目打包和插件管理工具vue_cli

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们11去添加就会比较麻烦。
vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli

先安装vue_cli工具
安装命令：npm install vue-cli
在这里插入图片描述

vue-cli快速创建webpack项目(要进入当前项目路径下)：vue init webpack
接下来的询问一直y,直到User ESlint to lint your code?时,选择n
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
输入npm run dev得到如下结果
在这里插入图片描述
然后访问8080,得到如下截图
在这里插入图片描述
这样我们就将项目打包且运行了

tata

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue