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

坦笑&&life 2024-06-28 09:33:02 阅读 52

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

一. Vue入门&环境搭建一、入门1. 来自 [vue官网(vue2)](https://cn.vuejs.org/v2/guide/) 的介绍:2. vue采用的是MVVM设计模式3. 特点

二、环境搭建1. 先安装node.js2. npm(node package manager)3. 使用cnpm镜像4. 移动本地仓库5. 安装vue6. 安装vue-cli脚手架7. 安装vue-router8. 其他常用命令

三、遇到的问题:1. 运行npm install 时,卡在 sill idealTree buildDeps 没有反应2. [… … … … … …] - idealTree:npm: sill idealTree buildDeps3. 使用了内网,代理报错4. npm版本问题,有一些警告

二. 【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍创建vue项目&项目搭建问题&项目文件介绍&.vue文件介绍一、创建vue项目步骤:

二、遇到的问题1. These relative modules were not found2. export ‘default’ (imported as ‘_vant’) was not found in ‘vue’3. Cannot find module ‘bug-versions/package.json’4. npm ERR! missing script:dev5. 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 correctl7. Error: Unknown option ‘–inline’8. npm ERR! missing script: serve

三、项目文件介绍四、代码文件介绍1. build文件夹里的webpack.base.conf.js配置文件2. main.js3. 根目录下的index.html4. router里面的index.js5. config文件夹index.js6. 总结:页面元素来源

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。