搭建一个vue项目、vue项目各配置文件作用和个人vue项目开发总结

最新推荐文章于 2024-08-07 20:43:54 发布

郑竟竟竟竟竟

最新推荐文章于 2024-08-07 20:43:54 发布

阅读量3.1k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/zhengjing1_1/article/details/107178002

版权

本文详细介绍了如何搭建Vue项目，包括安装node.js、配置环境变量和使用vue-cli。重点解析了项目结构，特别是build、src、static等目录的作用。此外，还总结了Vue的常用指令、父子组件通信方法、动态绑定class以及watch和路由传值的使用。

摘要由CSDN通过智能技术生成

搭建一个vue项目、vue项目各配置文件作用和个人vue项目开发总结

流程如下：
一.安装node.js

1).在node.js 官网中下载安装包

2).打开下载完的NodeJs文件

3).在文件目录下建立”node_global“及”node_cache“两个文件夹

4).打开cmd，输入：
         F:\文件所在路径\node_global
         F:\文件所在路径\node_global
         
 5).完成之后输入：npm root -g 查看是否安装成功

二.配置环境变量

  1).打开“此电脑”—“属性”—“高级系统设置”—“环境变量”
  
  2).复制nodejs目录路径,然后选中用户变量中的Path,单击’编辑’—’新建’，输入复制的地址  
  
  3).打开cmd，输入：node -v  检查是否配置成功

三.安装vue-cli脚手架，vue-cli可以快速构建Vue项目

  1).打开cmd，输入：npm install -g vue-cli
  
  2). vscode打开创建的文件夹，在终端中输入：vue init webpack （初始化Vue-Cli的项目的目录）
  
  3).安装结束后继续输入：npm install / npm i 安装依赖
  
  4).最后输入：npm run dev，启动项目

注：

build webpack文件，配置参数,打包的代码存放在这里。