前端框架的搭建

最新推荐文章于 2024-05-16 20:30:06 发布

WinkJie

最新推荐文章于 2024-05-16 20:30:06 发布

阅读量2k

点赞数

分类专栏：前端文章标签：框架vue 前端

本文链接：https://blog.csdn.net/qq_36662459/article/details/90739548

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

== 开发工具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,得到如下截图

这样我们就将项目打包且运行了

WinkJie

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端框架的搭建

== 开发工具idea,前端使用nodejs,项目构建工具npm,使用vue各个模块和组件==1.nodejs的安装安装简单,直接安装,安装过程一般是自动配置了环境变量的,windows+r—>cmd打开命令输入以下命令查看版本信息node -vnpm -v升级npm版本,(注意都是英文字母和字符)npm install npm@latest –g...
复制链接

扫一扫