当前位置：网站首页 > 技术流 > 正文

vue入门学习

citgpt 2024-10-01 19:44 8 浏览 0 评论

一、安装工具nodeJS

二、安装Vue

vue入门学习

三、创建项目并启动demo项目

一、安装nodeJS

下载地址：https://nodejs.org/en/

检查是否正常

echo %PATH% 查看环境变量 node -v 查看node版本 npm -v 查看node自带的NPM版本

npm config set prefix "H:\nodejs\node_global"

npm config set cache "H:\nodejs\node_cache"

npm list -global查看npm本地仓库

npm config set registry=http://registry.npm.taobao.org 配置镜像站，提升速度

npm config list 显示所有配置信息

配置信息保存位置：C:\Users\Administrator\.npmrc

检查一下镜像站行不行命令1：npm config get registry

检查一下镜像站行不行命令2：Npm info vue 看看能否获得vue的信息

npm install npm -g 设置在H:\nodejs\node_global里面 npm install 安装或更新命令 -g安装到global目录下

默认模块H:\nodejs\node_modules 目录将会改变为H:\nodejs\node_global\node_modules 目录，若直接运行npm install等命令会报错的。

需增加环境变量NODE_PATH 内容是：H:\nodejs\node_global\node_modules

二、安装Vue

NPM安装Vue.js npm install vue -g 安装到global全局目录中

NPM安装vue-router npm install vue-router -g

安装vue脚手架 npm install vue-cli -g vue -V 查看Vue脚手架版本

vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

三、创建项目并启动demo项目

vue init webpage vue01 创建一个基于webpage的新项目

npm run dev运行

进入project目录，运行npm run dev,打开提示地址http://localhost:8080

在项目开发完成之后，可以输入 npm run build 来进行打包工作。打包完成后，会生成 dist 文件夹，项目上线时，只需要将 dist 文件夹放到服务器就行了。

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境     #构建脚本目录
│   └── ...
├── config/                     #构建配置目录
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

npm list