利用vue-cli脚手架可以快速的搭建一个vue前端项目。
1.安装vue-cli
环境: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修改端口号。
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 创建项目