前端学习笔记(windows上用脚手架搭建vue项目及目录分析)

1、环境

vue -V

操作系统 : windows 10

npm : 6.11.3 (在dos命令窗口使用 npm -v 命令可以查看当前npm版本,如果没有安装则需要先去安装)

2、全局安装脚手架 vue-cli

npm install vue-cli -g

使用 vue -V查看是否安装成功,如果现实版本号,则表示安装成功

3、创建项目

  • 语法:vue init <template-name> <project-name>
    • <template-name>:项目模板名,这里使用webpack
    • <project-name>:项目名
  • 实际操作:

打开dos命令窗口,进入到自己希望项目创建的位置,然后执行命令:

vue init webpack myproject

如果不需要过多的指定配置的话,一直按回车键等待模块下载即可

模块下载的时间比较长,请耐心等待.........

经过漫长的等待后,如果没有保错,基本上就是搭建成功了; 如果出现了报错,为了保证后期开发不会遇到莫名其妙的问题,建议将项目删除重新构建。

4、项目目录结构

  • build :项目构建(webpack)相关代码
  • config :配置目录,包括端口号等。我们初学可以使用默认的。
  • node_modules :npm加载的项目依赖模块
  • router:存放路由文件的目录
  • src :这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    • assets :放置一些图片,如logo等。
    • components :目录里面放了一个组件文件,可以不用。
    • App.vue :项目入口文件,我们也可以直接将组件写在这里,而不使用components目录。
    • main.js :项目的核心文件
  • static :静态资源目录,如图片、字体等。
  • test :初始测试目录,可删除
  • .xxxx文件 :这些是一些配置文件,包括语法配置,git配置等。
  • index.html :首页入口文件,你可以添加一些meta信息统计代码啥的。
  • package.json :项目配置文件。
  • README.md :项目的说明文档,markdown格式

5、下载项目依赖

dos命令窗口进入到项目根目录,执行命令:

npm install


#或


cnpm install   #前提是已安装cnpm

耐心等待下载完毕即可。

发布了98 篇原创文章 · 获赞 26 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/weixin_42425970/article/details/102864223