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

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

2024-04-29 11:04:34 前端知识 前端哥 113 202 我要收藏

前端系列: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)buildconfig 文件夹:关于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文件介绍

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6293.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!