VUE 入门及应用 ( 三 ) 工程环境

春哥的魔法书

已于 2024-03-01 07:35:12 修改

阅读量731

点赞数

分类专栏： VUE 文章标签： vue.js npm node.js

于 2022-09-18 17:03:55 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/126919874

版权

VUE 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

5.工程环境

5.0.node.js 和 npm

node 官网: https://nodejs.org/

Node.js 中文网 (nodejs.cn)

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>