前端系列：Vue入门&环境搭建、【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍
前端系列：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写的，之前没学过，所以跟着 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里注入
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: '' })第一个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 标签来包裹所有的代码，比如 ··· 。
其他地方写好的组件也可以作为标签引用。
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文件介绍
-
还没有评论，来说两句吧...