== 开发工具idea,前端使用nodejs,项目构建工具npm,使用vue各个模块和组件==
安装简单,直接安装,安装过程一般是自动配置了环境变量的,
windows+r—>cmd打开命令输入以下命令查看版本信息
node -v
npm -v
升级npm版本,(注意都是英文字母和字符)
npm install npm@latest –g
创建一个空项目
取名
项目层级结构
进入vue_son目录
执行初始化操作
npm init -y
配置终端cmd.exe
在安装vue模块之前,得先进入vue_son目录下,执行操作命令
输入npm命令npm install vue
得到项目结构和模块
查看工程中有哪些模块
npm ls
新建一个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模块写前端项目了
在开发中，需要打包的东西不止是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
