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

---

一. 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盘新建两个文件夹

1. D:\nodejs\node_global

复制代码

和

1. node_cache

复制代码

（2）运行命令：

1. npm config set prefix “D:\nodejs\node_global
2. ”npm config set cache “D:\nodejs\node_cache
3. ”

复制代码

（3）npm list -global 表现在D盘就可以了
5. 安装vue

1. cnpm install vue -g

复制代码

6. 安装vue-cli脚手架

1. cnpm install -g vue-cli

复制代码

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

1. cnpm install vue-router -g

复制代码

8. 其他常用命令

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

复制代码

1. cnpm info vue 获得vue的信息

复制代码

三、遇到的题目：

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

网速太慢了
（1）设置为淘宝镜像

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

复制代码

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

1. npm config get registry

复制代码

输出淘宝镜像路径，就表现可以
2. [… … … … … …] - idealTree:npm: sill idealTree buildDeps

表现还在安装，不要动
3. 使用了内网，代理报错

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

复制代码

关掉代理，用无线安装
4. npm版本题目，有一些警告

1. npm WARN deprecated har-validator@5.1.5: this library is no longer supported
2. 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.
3. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
5. added 396 packages in 1m

复制代码

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

---

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

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

2022/3/14 周一
由于迩来有页面的需求，模板是用vue写的，之前没学过，以是跟着 b站秦疆老师【狂神说Java】Vue最新快速上手教程通俗易懂 入门vue（主要适用于只需要了解vue的后端同学），并参考菜鸟教程和一些良好博客，根据自己的环境对重点内容做的条记。
如有错误，欢迎在批评区指出，非常感谢！
（运行环境的搭建请看一. 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里注入

1. import ElementUI from 'element-ui' //element-ui的全部组件
2. import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
3. 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

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

复制代码

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

步伐的入口文件，从上往下实行。
导入自己的项目文件的方法：
（1）把项目文件夹xxx导入：

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

复制代码

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

1. new Vue({ // 生成一个vue实例
2.   el: '#app',
3.   router,
4.   components: { xxx },
5.   template: '<xxx/>'
6. })

复制代码

第一个el表达式，表现通过#号绑定index.html里的id="app"的div
3. 根目录下的index.html

首页页面，在这里修改title里的内容，可以修改网页标题。
4. router里面的index.js

导入自己的模块：

1. import xxx from '@/components/xxx'

复制代码

并在routes:里面声明

1. export default new Router({
2.   routes: [
3.     {
4.       path: '/',
5.       name: 'xxx',
6.       component: xxx
7.     }
8.   ]
9. })

复制代码

5. config文件夹index.js

可以更换端口，默认是8080

1. host: 'localhost',
2. 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）引用文件

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

复制代码

（2）常量

1. 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文件介绍

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。