利用vue-cli脚手架可以快速的搭建一个vue前端项目。

环境:nodejs

全局安装vue-cli

npm install -g vue-cli

最新的vue项目模板中,都带有webpack插件。因此不需要另外安装webpack。

安装完成后,查看vue是否安装成功。

vue -V  (大写!!)

如果不能识别vue可以更新npm的版本。

npm install -g npm

 

2.生成项目

生成基于webpack模板的vue项目。

vue init webpack vueproject

其中webpack是模板名称:vue.js的更多模板可以查看==》https://github.com/vuejs-templates

vueproject是自定义的项目名称。

进入项目:

cd vueproject

安装依赖:

npm install 

启动项目:

npm run dev

通过配置文件config>index.js修改端口号。

vue学习笔记(一)——利用vue-cli搭建一个前端项目

 

3.打包上线

自己的项目文件都需要放在src文件夹下。

项目开发完成后,可以把项目打包:

npm run build

打包完成后,会生成dist文件夹。项目上线时只需要将dist文件夹放到服务器就行了。

4.项目结构

--src

  --assets

    --fonts   // 存放字体文件

    --images  // 图片

    --styles  // css, sass, scss文件

  --components  // 公共组件

  --router    // 路由配置文件

  --store    // store配置文件

  --utils    // 工具文件

  --views   // 视图组件

  App-vue  // 主组件

  main.js   // 主组件入口

index.html  //主页

 

Vue Cli 3 创建项目

vue学习笔记(一)——利用vue-cli搭建一个前端项目  

 

相关文章:

  • 2021-07-10
  • 2021-04-14
  • 2021-04-11
  • 2021-10-31
  • 2021-11-13
  • 2022-12-23
  • 2021-06-04
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-30
  • 2021-06-13
  • 2021-12-24
  • 2022-12-23
  • 2021-12-03
相关资源
相似解决方案