构建vue项目
2019-08-19 18:30
176 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37600506/article/details/99747940
一、创建vue项目步骤如下 :
1、 安装nodejs环境
官网下载:https://nodejs.org/en/download/
安装完后 ,打开cmd ,查看node 、npm的版本
node -v npm -v
2、安装vue-cli
npm install -g vue-cli
查看vue 的版本号:
vue V //注意:是大写的V
3、在电脑某盘创建一个项目集的文件夹,命名,如:projects
4、打开你的编辑器,如idea或者webstrom,打开projects文件夹,开始创建若干个vue项目
5、安装vue
npm install vue
6、在项目集文件夹projects中创建第一个vue项目,命名为 vue01
vue init webpack vue02
? Project name 项目名称 ? Project description 项目描述 ? Author 作者 ? Vue build standalone ? Install vue-router? Yes 是否使用vue-router ? Use ESLint to lint your code? Yes 是否使用ESLint ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试 ? Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试
7、打开vue01:
cd vue01
8、安装依赖:
npm install
9、运行项目
npm ru dev
注意:
1、如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用了(默认服务启动的是本地的8080端口),可以通过修改一下配置文件 config>index.js里的端口号
2、如果想项目一执行 npm run dev 就打开浏览器,只需要修改config文件夹中index.js文件的autoOpeBrowser:true;
二、打包项目:
项目开发完成后,使用 以下命令进行打包:
npm run build
打包完成后,会 在当前项目中生成dist文件夹,项目需要上线时,只需要把dist文件夹放到服务器就可以了
相关文章推荐
- idea+vue-cli+webpack+iview构建前端项目
- vue2+webpack构建项目
- 使用webpack构建vue-cli项目,写scss脚本语言报错
- Vue项目搭建流程 以及 目录结构构建
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- vue+webpack构建项目
- vue初始化项目,构建vuex的后台管理项目架子
- 从nvm安装到vue-cli构建项目
- 用vue构建项目笔记2(引入自定义头部组件)
- vue-cli脚手架构建了项目如何去除Eslint验证(语法格式验证)
- webpack构建VUE项目使用jquery及其插件 expose-loader
- vue-cli构建项目之mock data
- 构建vue全家桶项目-引入vue-resource
- 轻松用vux构建vue项目
- Vue+Router+Webpack+Axios 构建项目实战(一)项目搭建
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- vue-cli如何快速构建vue项目
- 使用Vue构建项目时需要注意的几个事项
- webpack+vue+vueRouter+es6 构建的简单实例项目
- vue-cli构建项目