江苏龙网

  1. 主页 > 生活百科 > >

实操 vue全套教程( 五 )

vue


文章插图
 
安装过程比较简单，一直“下一步”即可 。
b，环境变量配置：安装完成后需要设置环境变量：即Path中添加安装目录(例如：D:javanodejs)，如图所示 。
 

实操 vue全套教程

文章插图
 
c，点击开始=》运行=》输入"cmd" => 输入node -v如图所示，验证安装是否成功 。
 
实操 vue全套教程

文章插图
 
2.npm安装
由于node.js已经集成了npm，所以之前npm也一并安装好了 。所以在cmd终端输入npm -v 来测试是否安装成功 。命令如图 所示，出现版本提示表示安装成功 。
实操 vue全套教程

文章插图
 
3基本使用
实操 vue全套教程

文章插图
 
步骤如下：
①　搭建第一个完整的Vue-cli 脚手架构建的项目 。
 
实操 vue全套教程

文章插图
 
②　安装完成，输入Vue -V，如果出现相应的版本号，则说明安装成功 。如图7-6所示 。
 
实操 vue全套教程

文章插图
 
③　我们可以使用vue-cli来快速生成一个基于webpack模板构建的项目，如图所示，项目名为vue-project 。
实操 vue全套教程

文章插图
 
④　配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目 。
然后进入项目目录（如：cd vue-project），使用 npm install安装依赖，如图所示 。
实操 vue全套教程

文章插图
 
  • 依赖安装完成后，我们来看一下项目的目录结构，如下所示：
.|-- build// 项目构建(webpack)相关代码||-- build.js// 生产环境构建代码||-- check-version.js// 检查node、npm等版本||-- dev-client.js// 热重载相关||-- dev-server.js// 构建本地服务器||-- utils.js// 构建工具相关||-- webpack.base.conf.js// webpack基础配置||-- webpack.dev.conf.js// webpack开发环境配置||-- webpack.prod.conf.js// webpack生产环境配置|-- config// 项目开发环境配置||-- dev.env.js// 开发环境变量||-- index.js// 项目一些配置变量||-- prod.env.js// 生产环境变量||-- test.env.js// 测试环境变量|-- node_modules//所需要依赖资源|-- src// 源码目录||--assets//存放资产文件||-- components// vue公共组件||-- router//存放路由js文件，用于页面的跳转||-- App.vue// 页面入口文件||-- main.js// 程序入口文件，加载各种公共组件|-- static// 静态文件，比如一些图片，json数据等||-- data// 群聊分析得到的数据用于数据可视化|-- .babelrc// ES6语法编译配置|-- .editorconfig// 定义代码格式|-- .gitignore// git上传需要忽略的文件格式|-- README.md// 项目说明|-- favicon.ico |-- index.html// 入口页面|-- package.json// 项目基本信息对于开发者更多操作的是src目录：
|-- src// 源码目录||--assets//存放资产文件||-- components// vue公共组件||-- router//存放路由js文件，用于页面的跳转||-- App.vue// 页面入口文件||-- main.js


推荐阅读


上一篇：深入浅出理解分布式一致性Paxos算法

下一篇：关于人工智能专业你了解多少？需要学什么？有关工作如何？