1

安装vue-cli

一、需要全局安装webpack

npm install -g webpack  //安装成功后输入`webpack -v`出现版本号
npm install webpack webpack-cli -g  //安装 webpack-cli 依赖

运行项目时报错: 'webpack' 不是内部或外部命令,也不是可运行的程序。
报这个错是因为没有全局安装webpack,解决方法:
1.确保nodeJS已安装。
2.找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下两个文件,没有就新建。
image.png
3.修改全局路径,需要把默认的安装包路径改成nodejs里面这两个新建的文件

配置全局路径:npm config set prefix “D:\soft\nodejs\node_global”
配置缓存路径:npm config set cache “D:\soft\nodejs\node_cache”

注意: 这里的路径是你刚刚新建的文件的路径,你可以在文件处右击-->复制当前路径

4.修改系统的环境变量

桌面--> 我的电脑 --> 右击 属性 --> 高级系统设置 --> 环境变量(或者直接打开控制面板)
image.png

注意: 安装之后如果没关闭运行窗口,直接webpack-v,还是会报'webpack'不是内部或外部命令......,一定要把运行窗口关闭后,重新打开运行,项目中也是,先把运行窗口关闭在使用webpack的命令.我安装的时候没关闭窗口,结果一直报错,我删了安装了好几遍,坑。

5.webpack -v 查看时,会提示必须要安装webpack-cli,根据提示执行y即可继续安装,也可以执行命令npm install webpack-cli -g,来安装。我是用继续y来安装的,如图:
image.png
安装的时候可能有一些warn警告,不影响,只要安装好包就可以。
二、全局安装vue-cli

npm install --global vue-cli  //安装完成之后输入 `vue -V`出现相应的版本

image.png

三、使用vue-cli来创建一个基于 webpack 模板的新项目
1.创建:cmd利用cd /d E:\2021-5-4指令进入到保存项目的文件夹下,然后输入命令:vue init webpack

image.png
输入命令后,选项说明:

1. ? Project name todo_list: 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)
2. ? Project description A Vue.js project: 项目描述,也可直接点击回车,使用默认名字
3. ? Author galen galen@git.xgqq.com: 作者,输入你的大名
4. ? Vue build standalone:
5. ? Install vue-router? Yes: 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
6. ? Use ESLint to lint your code? Yes: 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。
7. ? Pick an ESLint preset Standard: 接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
8. ? Set up unit tests Yes: 是否安装单元测试,我选择安装y回车
9. ? Pick a test runner jest
10. ? Setup e2e tests with Nightwatch? Yes: 是否安装e2e测试 ,我选择安装y回车
11. ? Should we run npm install for you after the project has been created? (recommended) npm:

image.png

2.安装项目所需要的依赖:进入新建的项目文件夹下,就是上头有一些文件的里面,输入命令:

cnpm install//目录中`node_modules`文件夹,放所有依赖的模块。

四、解释一下每个文件夹
build //构建脚步目录,保存一些webpack的初始化配置
config //构建配置目录,项目初始化的配置,包括端口号等
node_modules //npm加载的项目依赖的模块
src //源码目录,这里是我们要开发的目录,基本上要做的事情都在这个目录里

  • assets //资源目录,用来放置图片,如logo等
  • components //组件目录,用来放组件文件
  • router //
  • app.vue //是项目入口文件
  • main.js //是项目的核心文件
    static //文件夹用来放置静态资源目录,如图片、字体等。
    test //初始测试目录,可删除
    .babelrc babel //编译参数,vue开发需要babel编译
    .gitignore //用来过滤一些版本控制的文件,比如node_modules文件夹
    index.html //是首页入口文件,你可以添加一些 meta 信息或统计代码啥。
    package.json //是项目配置文件,记载着一些命令和依赖还有简要的项目描述信息
    README.md //项目的说明文档,markdown 格式,介绍自己这个项目的

五、启动项目
npm run dev
image.png

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js


花火516
6 声望0 粉丝