5.工程环境
5.0.node.js 和 npm
node 官网: https://nodejs.org/
https://nodejs.cn/
下载 LTS(长期支持版本)版本后, 安装 下一步
测试 版本
node -v
5.0.1.npm
npm ( Node.js Package Manager )命令, node 包管理工具 相当于java中的maven, 用于导入种类组件
以下是一些npm的常用指令:
5.0.1.1.***查看npm版本
npm -v
5.0.1.2.初始化项目
# 交互式创建`package.json`文件:
npm init
# 快速生成默认配置的`package.json`文件:
npm init -y
5.0.1.3.***设置或获取当前镜像源
默认镜像 https://registry.npmjs.org
# 获取当前使用的npm registry:
npm config get registry
# 切换镜像源(例如切换到淘宝npm镜像):
# 已过期不可用
# npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
5.0.1.4.***安装包
# 安装项目需要的全部包, 需要配置 package.json文件
npm install
# 安装并保存为项目的依赖(写入`dependencies`部分):
npm install <包名> --save
# 简写形式:
npm i <包名> -S
# 安装并保存为开发依赖(写入`devDependencies`部分):
npm install <包名> --save-dev
# 简写形式:
npm i <包名> -D
# 全局安装工具或命令行程序:
npm install <包名> -g
# 安装指定版本的包:
npm install <包名>@<版本号>
5.0.1.5.更新包
# 更新所有过期的本地项目依赖至最新版本:
npm update
# 使用`npm-check-updated`检查并更新依赖:
ncu -u
(需要先全局安装npm-check-updated
:npm install -g npm-check-updated
)
5.0.1.6.卸载包
npm uninstall <包名>
# 简写:
npm r <包名>
5.0.1.7.搜索包
npm search <包名>
# 简写:
npm s <包名>
5.0.1.8.列出已安装的包
npm list
5.0.1.9.查看某个包的信息
npm view <包名>
5.0.1.10.***运行项目的脚本
根据package.json
中的scripts定义执行脚本:
npm run <script-name>
5.0.1.11.清理缓存
npm cache clean --force
5.0.1.12.构建项目
# 项目构建
npm run build :
5.0.1.13.升级npm自身
npm install -g npm
以上是npm的一些基本和常用的命令,根据具体需求可能还有更多高级用法。记得在实际操作中使用最新的npm文档进行参考。
5.0.2.nrm
nrm 是一个便捷的 npm registry 管理工具,全称为 npm registry manager
。它允许用户在多个 npm 镜像源之间快速切换,以提高依赖包下载速度或者解决网络问题。
使用 nrm,您可以方便地查看和切换不同的 npm 包仓库(registry),包括但不限于官方源、淘宝源、cnpm 源等。这对于在中国等网络环境可能影响 npm 官方仓库访问速度的地区尤为有用。
安装 nrm:
npm install -g nrm
常用命令:
- 列出所有可用镜像源:
nrm ls
- 切换到某个镜像源(例如切换到官方源):
nrm use npm
- 测试各个镜像源的速度:
nrm test
通过 nrm,您可以轻松管理和优化 npm 的包下载源,从而提升开发效率。
5.1.安装 VUE环境
# 最新稳定版
npm install -g vue
5.2.创建VUE项目
5.2.1.安装vue cli 3+
提供了 界面 设置 方式
# 全局安装 vue cli
# $ npm install -g @vue/cli-init
npm install @vue/cli -g
# 测试版本
vue -V
5.2.2.创建项目结构
# 创建项目
vue create [项目名:vue-dome]
# 运行项目
npm run serve
创建过程中的选择项 , 通过 上下 , 回车键来选择
1.选择 预设(preset), default 是默认结构, Manually select features 手动配置
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
2.选择 按空格键选中或取消,a全选,i反选
Babel : 一个js的编译器
TypeScript : 一种js的版本
Progressive Web App (PWA) Support : 渐进式Web应用支持
Router : vue-router vue路由支持
Vuex : vue状态管理模式 session
CSS Pre-processors : CSS预处理器
Linter / Formatter : 代码风格检查和格式化
Unit Testing : 单元测试
E2E Testing : 端到端 测试
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
这里可以选择 Router Vuex 等 , 这样就 需要再近一步设置, 也可以 后面 再 添加
3.选择路由是否使用history模式 , yes
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
4.ss的预处理,可以选择 stylus
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
> Stylus
5.选择代码风格检查和格式化 , ESLint + Prettier
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
6.选择语法检查方式,我自己选择保存就检测
第一个是保存检测,第二个是fix和commit的时候检测
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
7.单元测试,选择Mocha
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
8.配置文件存放地方
第一个是独立文件夹位置,第二个是在package.json文件里
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
9.询问是否记录这一次的配置,以便下次使用
? Save this as a preset for future projects? (y/N)
10.如果上一步选择yes, 为保存 起个名字
? save preset as:
11.回车开始 创建项目
Vue CLI v4.5.3
✨ Creating project in D:\testcli\test-vue.
� Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
[ .................] \ fetchMetadata: sill pacote range manifest for @babel/plugin-proposal-class-properties@^7.8.3 fet
5.3.项目结构
vue 项目是 单页面 项目 (就是只有一个 html)
通过 router 将各个 vue 文件 所定义的组件 , 绑定到 页面上
5.3.1. cli3 项目
/node_modules 引入的 资源 包
/node_modules/vue/dist/vue.js vue的 js文件
/public 这个文件夹在项目根目录下
/public/index.html 项目单页面
/src 开发代码 文件夹
/src/assets 静态资源
/src/components 组件文件夹, 也就是页面局部
/src/router 路由信息
/src/views 页面文件夹, 也就大组件
/src/App.vue 主页面组件
/src/main.js 起始配置
/package-lock.json
/package.json 引入资源基本配置
5.4. vue 文件结构
vue 文件的结构 (就是一个 组件)
<template> html 模版, 在 template 下只能有一个根结点</template>
<script> 脚本 export default { }</script>
<style> 样式 </style>
修改 /views/AboutView.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg : "hello "
}
}
}
</script>
<style>
</style>