vue+webpack项目创建过程

  • 首先电脑确保安装好nodejs,nodejs集成好了npm ,用node -v 、npm -v 测试是否安装成功;
  • 安装cnpm(淘宝镜像)代替npm下载依赖包
    npm install -g cnpm –registry=https://registry.npm.taobao.org
  • 安装webpck
    cnpm install -g webpack
  • 安装脚手架vue-cli
    cnpm install -g vue-cli
  • 选择路径,将控制台指向选定路径,在当前路径下创建工程
    vue init webpck-simple my-project(工程名)
    vue init webpck my-project
    两者创建的项目目录结构差别很大,后者创建的项目包含的依赖很全,前者目录结构相对简单,但是更喜欢前者,然后再根据需要自己手动下载需要的依赖,一步一步理解原理
    这里写图片描述
  • 安装依赖 进到已创建的工程路径下 cd my-project 然后 cnpm install
    这里写图片描述
  • 创建好的目录结构,可以根据需要自行修改
    这里写图片描述
  • 主要文件的用途与作用

    node_modules : 下载好的依赖包都在该文件夹下

    package.json 文件 : 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

    webpack.config.js文件:Webpack在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的webpack.config.js文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 –config 选项来指定配置文件。

猜你喜欢

转载自blog.csdn.net/hanxue_tyc/article/details/78027707