搭建Vue项目入门(IDEA)

sleep22

已于 2022-08-28 10:04:52 修改

阅读量417

点赞数

分类专栏：前端学习笔记文章标签： vue.js 前端 javascript

于 2022-08-18 17:19:45 首次发布

本文链接：https://blog.csdn.net/weixin_60096751/article/details/126400569

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue的开发都是基于NodeJS，实际开发采用vue-cli脚手架开发，vue-router 路由，vuex做状态管理；Vue UI 界面一般使用ElementUI或者ICE来快速搭建前端项目

vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个vue 的项目模板

主要功能：

统一的目录结构
本地调试
热部署
单元测试
继承打包上线

环境

Node.js ：下载 | Node.js 中文网安装在自己的环境目录下
Git

确认nodejs安装成功：

cmd下输入 node -v，打印出版本号；

cmd下输入 npm -v，打印出版本号

安装Node.js淘宝镜像加速器 cmd下输入 npm install cnpm -g

cmd下输入 npm install webpack -g

注：webpack 4.X 开始，需要安装 webpack-cli 依赖要使用这条命令。

或者根据系统提示输入 yes

npm install webpack webpack-cli -g

安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

全局安装vue-cli，在cmd中输入命令:

npm install --global vue-cli

安装完成之后输入 vue -V，如下图，如果出现相应的版本号，则说明安装成功。

且打开C:\Users\ASUS\AppData\Roaming\npm目录下可以看到(显示隐藏目录)：

开始vue-cli 应用程序

全部选n，创建完成后直接初始化，手动执行。

运行结果

初始化并运行

 cd 03vue_vuejs
  npm install 
  npm run dev

webpack

模块加载器兼打包工具，能把各种资源都作为模块来处理和使用

安装webpack

cmd输入以下指令

npm install webpack -g
npm install webpack-cli -g

测试安装成功 一般下载都是最新版本

webpack -v
webpack-cli -v

配置

创建webpack.config.js 配置文件

entry：入口文件，指定WebPack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

vue-router路由

安装

npm install vue-router --save-dev

注意：

利用vue cli 新建vue2项目,安装vue-router后浏览器控制台报错，且import找不到vue-router

npm会自动下载最新版本，可以在package.json看看

解决方法：卸载4版本的router,@指定版本装3.x的vue-router即可。

npm uninstall vue-router
npm i vue-router@3.5.2

使用

如果在一个模块化工程中使用，必须要通过Vue.use()明确地安装路由功能

import Vue form 'vue'
import VueRouter form 'vue-router'

Vue.use(VueRouter);

vue-axios同理

elementUI

新建工程

进入工程目录
cd 05vue_hello-vue
安装vue-router
npm install vue-router --save-dev
安装element-ui
npm i element-ui -s
安装依赖
npm install
安装SASS加载器
npm install sass-loader --save-dev
npm install node-sass --save-dev
启动测试
npm run dev