前端框架搭建

                                                                                  == 开发工具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

                                                                                  展开阅读全文

                                                                                  没有更多推荐了,返回首页