前端项目webpack构建目录结构,vue前端开发,开发工具vscode

前端项目构建

 步骤1:

npm init -y
说明:Wrote to D:\idea\vue\vue_init\package.json:    生成package.json文件
类似于创建pom文件,导入依赖用

步骤2:

npm install vue --save
说明:项目引入vue框架,安装就可以使用vue组件了
生成package-lock.json文件,里面有镜像信息,vue版本信息等
生成一堆node_modules文件,里面dist文件夹下包含vue.js文件


步骤3:

npm install -g vue-cli  安装的全局的,之前安装过了就没必要再安装了
说明:vue-cli是项目脚手架,使用 vue-cli 可以快速创建 vue 项目
用来生成vue的模板(架子),相当于按照设计图搭建好房子的架子


步骤4:

vue init webpack 项目名  (生成项目目录结构,路由等)

? Project name vslm
? Project description vslm sline sbox sboxset
? Author mocar
? Vue build standalone
回车到弹出:Install vue-router? (Y/n)
依次选择:yes no no no 最后选择npm安装

遇到的问题:最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack.
也可以自己重新安装webpage:npm install webpack -g,再执行上面的指令关于报错:(其实是自己把webpack写成了webpage)。。。。。。。。
:vue-cli · Failed to download repo vuejs-templates/webpage: Response code 404 (Not Found)
思路:

node -v  (小写的v)
v12.12.0
vue -V  (大写的v)
2.9.6
webpack -v(小写v); 如果需要重新安装,就用 npm install webpack -g
执行webpack -v时报错,没找到,但是系统提示是否安装:yes
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): y
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...


配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

package.json文件:项目面熟,依赖等

搭建参考:

https://www.jianshu.com/p/02b12c600c7b

发布了109 篇原创文章 · 获赞 2 · 访问量 5721

猜你喜欢

转载自blog.csdn.net/Seven71111/article/details/103064414