VUE安装和创建一个基于webpack模板的项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

之前安装过，由于电脑系统出了问题，重装系统了，所以。。。就需要再部署环境、安装VUE。记得之前的部署安装，今天再次操作的时候，还有一个迷糊和错误，今天特意写这个文档，一是想给以后的VUE初学者一个简要的搭建项目过程说明；二呢，也是想请教更多的大咖来帮助自己解惑，所以呢、所以呢，欢迎来吐槽...好吧，废话不多说了，开始吧！

一、VUE简介

Vue.js是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。

官网教程：https://cn.vuejs.org

 

二、安装运行环境

2.1 安装NODE.JS

NODE.js下载：https://nodejs.org/en/download/

安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

安装node.js之后，npm也会自动安装

查看安装结果（快捷键win+r》输入：cmd）：

输入：node -v 和npm -v    （出现版本号，代表已安装成功）

卸载NODE.js：控制面板》程序》卸载程序。

​​​​​​​2.2 NPM

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有30亿次的下载量，包含超过 600000 个 包（package，即代码模块）。来自各大洲的开源软件开发者使用npm互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm由三个独立的部分组成：

  1. 网站：网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

  2. 注册表：注册表是一个巨大的数据库，保存了每个包（package）的信息。

  3. 命名行工具CLI：CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

 

安装CNPM

输入：npm install cnpm -g --registry=https://registry.npm.taobao.org

查看是否成功安装：cnpm -v

​​​​​​​​​​​​​​2.3 安装VUE

官网：https://cn.vuejs.org/v2/guide/installation.html

安装vue：npm i vue（未操作）

 

首先安装vue-cli脚手架工具：

输入：cnpm i --g vue-cli

查看安装结果： vue --version

（不能使用vue -v查看vue的版本，具体为什么，我也好奇）

 

​​​​​​​​​​​​​​2.4 webpack简介

webpack 是一个现代JavaScript 应用程序的静态模块打包器 (module bundler) 。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

特征：代码分隔、插件系统、减少HTTP请求、让初始加载时间更快

 

webpack官方文档：https://www.webpackjs.com/concepts/

****：https://www.imooc.com/learn/802

Webpack+Vue实例：https://www.imooc.com/video/16412

****：https://www.imooc.com/video/14185

****：https://www.imooc.com/video/14184

 

三、创建基于webpack模板的项目

3.1 命令行创建项目

创建一个项目文件夹，命令行进入文件夹下

​​​​​​​​​​​​​​3.1.1 正确的创建项目方法

输入：vue init webpack test1541

结果：创建成功

 

运行：npm run dev

 

浏览器中输入：localhost：8080

 

原本到这里，项目已经成功创建了，但是由于对VUE创建不熟悉，也出现一些看起来很不可思议的低级错误，下面列出我在初始化项目时，发生的两个错误方法。

​​​​​​​​​​​​​​3.1.2 创建错误方法一

把“init”写成了“i”，如下：

命令行输入：vue  i  webpack  test11221454  

创建完成后，还是能正常初始化项目结构出来，用VSCode打开文件夹查看项目结构，如下：

 

但是，

运行：npm run dev

报错：‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件

 

同时，

浏览器访问：localhost:8080

也报错：网页无法访问

​​​​​​​​​​​​​​3.1.3 创建错误方法二

把“vue”写成了“npm”，“init”写成了“i”，如下：

命令行输入：npm i webpack --save-dev   

结果：报错，无结果

 

​​​​​​​​​​​​​​3.2 项目结构

创建项目的结构如下：

 

以上是 VUE安装和创建一个基于webpack模板的项目 的全部内容， 来源链接： utcz.com/z/375856.html

回到顶部