前端系列：Vue入门&环境搭建、【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍

一. Vue入门&环境搭建
- - 一、入门
  - - - 1. 来自 [vue官网(vue2)](https://cn.vuejs.org/v2/guide/) 的介绍：
      - 2. vue采用的是MVVM设计模式
      - 3. 特点
  - 二、环境搭建
  - - 1. 先安装node.js
    - 2. npm（node package manager）
    - 3. 使用cnpm镜像
    - 4. 移动本地仓库
    - 5. 安装vue
    - 6. 安装vue-cli脚手架
    - 7. 安装vue-router
    - 8. 其他常用命令
  - 三、遇到的问题：
  - - 1. 运行npm install 时，卡在 sill idealTree buildDeps 没有反应
    - 2. [… … … … … …] - idealTree:npm: sill idealTree buildDeps
    - 3. 使用了内网，代理报错
    - 4. npm版本问题，有一些警告
二. 【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍
- - 创建vue项目&项目搭建问题&项目文件介绍&.vue文件介绍
  - 一、创建vue项目
  - - 步骤：
  - 二、遇到的问题
  - - 1. These relative modules were not found
    - 2. export ‘default’ (imported as ‘_vant’) was not found in ‘vue’
    - 3. Cannot find module ‘bug-versions/package.json’
    - 4. npm ERR! missing script:dev
    - 5. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
    - 6. Unknown custom element: - did you register the component correctl
    - 7. Error: Unknown option ‘–inline’
    - 8. npm ERR! missing script: serve
  - 三、项目文件介绍
  - 四、代码文件介绍
  - - 1. build文件夹里的webpack.base.conf.js配置文件
    - 2. main.js
    - 3. 根目录下的index.html
    - 4. router里面的index.js
    - 5. config文件夹index.js
    - 6. 总结：页面元素来源
  - 五、.vue文件简单介绍
  - - 1. template 部分
    - 2. script 部分
    - 3. style 部分

一. Vue入门&环境搭建

2022/3/10 周四

由于最近有页面的需求，模板是用vue写的，之前没学过，所以跟着 b站秦疆老师【狂神说Java】Vue最新快速上手教程通俗易懂入门vue（主要适用于只需要了解vue的后端同学），并参考菜鸟教程和一些优秀博客，根据自己的情况对重点内容做的笔记。

如有错误，欢迎在评论区指出，非常感谢！

一、入门

1. 来自 vue官网(vue2) 的介绍：

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。

2. vue采用的是MVVM设计模式

（1）Model模型层，这里表示JavaScript对象。
（2）View视图层，这里表示DOM（HTML操作的元素）。
（3）ViewModel层是连接视图和数据的中间件。在MVVM架构中，是不允许数据和视图直接通信的。因此ViewModel能观察到数据的变化，对视图对应的内容进行更新；也能监听到视图的变化，并通知数据发生改变。

Vue.js就是MVVM中的ViewModel层的实现者。

3. 特点

（1）低耦合；
（2）数据能实时刷新，不用刷新页面；
（3）vue能改变DOM元素。

二、环境搭建

1. 先安装node.js

node.js类似于Java的JVM。

（1）下载安装： https://nodejs.org/en/download/

（2）打开命令行，node -v 出现版本即安装成功

2. npm（node package manager）

npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），类似于Java的Maven。

（1）正常情况下跟node.js一起被安装了

（2）npm -v 查看npm命令是不是安装成功

3. 使用cnpm镜像

cnpm是中国版的npm，是淘宝定制的cnpm命令行工具，代替默认的npm，跟npm用法完全一致，只是在执行命令时将npm改为cnpm。如果用npm等得太久，推荐使用cnpm。

（1）npm install -g cnpm --registry=[https://registry.npmmirror.com](https://registry.npmmirror.com)
（-g表示装到global目录下）

（2）cnpm -v 输出版本则安装成功

4. 移动本地仓库

不想把仓库放C盘的话，可以移到比如说D盘。

（1）在D盘新建两个文件夹

D:\nodejs\node_global

和

node_cache

（2）运行命令：

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

（3）npm list -global 显示在D盘就可以了

5. 安装vue

cnpm install vue -g

6. 安装vue-cli脚手架

cnpm install -g vue-cli

（要记得全局安装，否则会安装到你当前的目录，使用上有限制）

7. 安装vue-router

cnpm install vue-router -g

8. 其他常用命令

cnpm config list 可以查看所有配置信息

cnpm info vue 获得vue的信息

三、遇到的问题：

1. 运行npm install 时，卡在 sill idealTree buildDeps 没有反应

网速太慢了

（1）设置为淘宝镜像

npm config set registry https://registry.npm.taobao.org

（2）使用如下命令检验是否成功

npm config get registry

输出淘宝镜像路径，就表示可以

2. [… … … … … …] - idealTree:npm: sill idealTree buildDeps

表示还在安装，不要动

3. 使用了内网，代理报错

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmmirror.com/cnpm failed, reason: getaddrinfo ENOTFOUND registry.npmmirror.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

关掉代理，用无线安装

4. npm版本问题，有一些警告

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 396 packages in 1m

但是好像安装成功了，所以先不管了

二. 【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍

创建vue项目&项目搭建问题&项目文件介绍&.vue文件介绍

2022/3/14 周一

如有错误，欢迎在评论区指出，非常感谢！

（运行环境的搭建请看一. vue入门&node.js环境搭建。）

一、创建vue项目

步骤：

（1）cd 进入要放项目的盘

（2）vue init webpack vue （webpack是一个模块打包器，第二个vue就是你要创建的项目文件夹的名称）

（3）安装时有一些提示，前面都可以直接回车，从 “Use ESLint to lint your code?（是否使用ESLint检测你的代码）” 开始选择 N(no)

（4）cd 进入项目所在目录

（5）cnpm install 安装所需依赖，会在目录里生成一个node_modules文件夹放依赖

（6）cnpm run dev 启动项目。

出现 Your application is running here: http://localhost:8080 提示，就是启动成功了：

在这里插入图片描述

浏览器访问http://localhost:8080可以看到vue主页：

在这里插入图片描述

二、遇到的问题

（我遇到的问题以及解决方法，有可能其他原因也会导致同样的报错，则解决方法不同）

1. These relative modules were not found

没有找到这些相关模块。

是我的静态资源的包放的位置错了，导致里面引用路径不对，找不到文件，
还有的就是确实缺少这些资源的。

2. export ‘default’ (imported as ‘_vant’) was not found in ‘vue’

几千条警告，这里查了好久都没解决，最好发现是我下载的vant依赖与模板里使用的版本不兼容，在package.json里降低到对应的版本，再cnpm install重新下载依赖，就解决了。

3. Cannot find module ‘bug-versions/package.json’

网上找到的方法说用 npm install --save-dev 重新下依赖

但是我这样没有解决，最后发现是没有网络，内网切换成无线网就好了。

4. npm ERR! missing script:dev

package.json中没有dev

可能是package.json文件被什么改了，里面 “scripts” 节点下的 “start”: “npm run dev” 没有了，这个指定的就是启动的命令。

也可以 vue init webpack 重新初始化项目试试。

5. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

v15版的vue-loader配置需要加个VueLoaderPlugin

网上找到的解决方案是 把vue-loader回到v14版本 ，解决了。

6. Unknown custom element: - did you register the component correctl

没有下载这个依赖

（1）npm install element-ui -s 下载

（2）还要在main.js里注入

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

7. Error: Unknown option ‘–inline’

可能是操作过程中整个项目有什么重要组件被卸载掉了

vue init webpack 重新搭建一次就可以了

8. npm ERR! missing script: serve

没有进入根目录就执行npm run serve

（这是我在找解决方法时尝试的命令，但其实我这里不需要用到，一般是vue-cli3用这个命令，我这里就是用npm run dev启动）

三、项目文件介绍

（1）build 和 config 文件夹：关于webpack的配置，里面包括一些server,和端口；
（2）node_modules：安装依赖代码库；
（3）src ：存放源码；
（4）static：存放第三方静态资源的，static里面的.gitkeep，如果为空，也可以提交到gitHub上面，正常情况下，是不可以提交的。
（5）.babelrc：把es6文件编译成es5；
（6）.editorconfig：编辑器的配置；
（7）.eslintignore 忽略语法检查的目录文件，就是忽略对build/.js和 config/.js；
（8）package.json ：描述这个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息，格式是严格的JSON格式。

四、代码文件介绍

1. build文件夹里的webpack.base.conf.js配置文件

这个可以配置入口文件：里有个entry

entry: {
    app: './src/main.js'
},

可以看到默认入口是src下的main.js

2. main.js

程序的入口文件，从上往下执行。

导入自己的项目文件的方法：

（1）把项目文件夹xxx导入：

import xxx from './components/xxx/index'

（2）在 new Vue({···}) 里面需要传给vue自己的项目实例组件 xxx

new Vue({ // 生成一个vue实例
  el: '#app',
  router,
  components: { xxx },
  template: '<xxx/>'
})

第一个el表达式，表示通过#号绑定index.html里的id="app"的div

3. 根目录下的index.html

首页页面，在这里修改title里的内容，可以修改网页标题。

4. router里面的index.js

导入自己的模块：

import xxx from '@/components/xxx'

并在routes:里面声明

export default new Router({
  routes: [
    {
      path: '/',
      name: 'xxx',
      component: xxx
    }
  ]
})

5. config文件夹index.js

可以更换端口，默认是8080

host: 'localhost',
port: 8080,

6. 总结：页面元素来源

（1）入口 main.js 的el表达式绑定静态页面 index.html

（2）main.js模板组件 : App组件（如果要改成自己的模块，除了修改App，还需要同时改import处的名称、components和template的引用）

（3）App.vue : img图片 + router-view

（4）router/index.js : HelloWorld组件

（5）HelloWorld.vue 页面内容

五、.vue文件简单介绍

每个.vue文件包含三种类型的顶级语言块 ,

1. template 部分

必须在里面放置一个 html 标签来包裹所有的代码，比如<div> ··· </div>。

其他地方写好的组件也可以作为标签引用。

2. script 部分

（1）引用文件

import { ImagePreview } from 'vant'; // 引用vant依赖里的ImagePreview模块
import reportOne from './reportOne/index.vue'; // 引用自己的项目里的reportOne模块作为组件

（2）常量

const isAndroid = window.navigator.appVersion.match(/android/gi);

（3）代码放在 export default { } 里

只有export导出了的，才能被外层通过import来导入。

name：‘HelloWorld’, HelloWorld就是暴露的接口名，外层引用时写import HelloWorld；如果不写接口名的话，外层也可以直接引用用文件名来导入。
components：声明引用的组件。
data()：声明数据。
methods: 声明方法。
created 是vuejs中的勾子函数之一。表示当组件加载完成时需要执行的内容。可以执行methods里声明的函数。

3. style 部分

主要是css样式。

参考博客：
1.npm——安装教程、安装vue脚手架
2.搭建一个Vue框架
3.搭建一个完整的Vue 框架

参考博客：
1.搭建一个Vue框架
2.搭建一个完整的Vue 框架
3.初识 Vue.js 中的 *.Vue文件

hanne_lovegood

【vue】入门&node.js环境搭建

【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍