鱼C论坛

 找回密码
 立即注册
查看: 4408|回复: 1

[学习笔记] vue项目搭建步骤以及一些安装依赖包

[复制链接]
发表于 2021-4-22 14:01:35 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x

一. vue-cli初始化
1. 全局安装 vue-cli
npm install --global vue-cli
2. 创建一个基于 webpack 模板的新项目
vue init webpack my-project
3. 安装依赖
cd my-project
npm install (换源安装: npm install --registry https://registry.npm.taobao.org )
4.启动:

npm run dev

5.打包:

npm run build


二. 安装额外的依赖包
1. 两种依赖包的安装方式
1.1 项目依赖包
npm install --save vue
1.2 开发依赖包
npm install --save-dev webpack
2. less依赖包
npm install --save-dev less less-loader
3. 网络请求axios依赖包
npm install --save axios
4. axios低版本浏览器补丁es6-promise依赖包
npm install --save es6-promise
5. 路由安装
npm install --save vue-router
6. 状态管理安装
npm install --save vuex
7. cookie封装库
npm install --save js-cookie
8.Vue中加入国际化(i18n)中英文功能

npm install vue-i18n --save
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2021-4-22 14:03:48 | 显示全部楼层
首先必须要有npm,window下无法在线更新node.js版本,所以每次要更新版本需要重新安装node.js

1.新建一个文件夹用于存放项目 mkdir fileName

2.下载一个全局生成vue项目的脚手架 vue-cli
    安转指令:npm install vue-cli -g

3.初始化一个项目
&#160;&#160;&#160;&#160;vue init webpack <项目名>。这里的eslint可选择为n,eslint是代码规范验证,如果选择y会经常报错,会比较烦。

4.进入项目,安装依赖包 npm install

5.npm run dev 启动项目,正常启动可以在http://localhost:8080/ 下看见自己新建立的项目。

接下来是一些常见的依赖包
1.webpack模块打包
&#160;&#160;&#160;&#160;npm install –save-dev webpack
&#160;&#160;&#160;&#160;4.0以上版本使用 npm install –save-dev webpack-cli
&#160;&#160;&#160;&#160;webpack 与 less最好不要全局安装,否则可能导致webpack的版本差异

2.babel 可以将es6语法转为es5
&#160;&#160;&#160;&#160;npm install babel-core –save-dev
&#160;&#160;&#160;&#160;npm install babel-loader –save-dev
&#160;&#160;&#160;&#160;安转完后可能会导致webpack无法使用 需要重新安装

3.css-loader 将css解析成模块,将解析的内容插入到页面
&#160;&#160;&#160;&#160;npm install css-loader style-loader –save-dev

4.解析图片
&#160;&#160;&#160;&#160;file-loader url-loader(依赖于file-loader)
&#160;&#160;&#160;&#160;npm install file-loader url-loader –save-dev

5.需要解析html插件
&#160;&#160;&#160;&#160;插件的作用是以我们自己的html为模板将打包后的结果,自动引入到html中产出到dist目录下
&#160;&#160;&#160;&#160;npm install html-webpack-plugin –save-dev

6.webpack-dev-server
&#160;&#160;&#160;&#160;内置一个服务 可以启动一个端口号,当代码更新时可以自动打包(内存中打包)
&#160;&#160;&#160;&#160;不生成实际的文件 监听代码当代码有变化就重新执行
&#160;&#160;&#160;&#160;npm install webpack-dev-server –save-dev
&#160;&#160;&#160;&#160;安装提示无权限时 cmd可以用管理员模式打开
&#160;&#160;&#160;&#160;package.json中 script “dev”: “webpack-dev-server”
————————————————
版权声明:本文为CSDN博主「切图工」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xmy120/article/details/82287928
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表