本文主要给大家分享了vue项目的创建步骤相关知识点,非常的实用,有需要的小伙伴可以来参考下
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
MVVM,一种更好的UI模式解决方案;
一、安装node环境
下载地址:https://nodejs.org/en/
检查是否安装成功;如果能够成功输出版本号,就说明我们安装node环境成功;
可以使用淘宝镜像提高效率:http://npm.taobao.org/
输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
检查是否安装成功:
二、搭建vue项目环境
1、全局安装vue-vli
npm install --g vue-cli
2、进入项目目录,创建一个基于webpack模板的新项目: vue init webpack 项目名
3、切换到项目,进入项目 cd 项目名,然后在安装依赖 cnpm install
安装成功后,项目文件夹中回多出一个目录 node_modules
4、启动项目npm run dev
项目启动成功:
1)build.js ==> 生产环境构建脚本;
2)check-versions.js ==> 检查npm,node.js版本;
3)utils.js ==> 构建相关工具方法;
4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;
5)webpack.base.conf.js ==> webpack基本配置;
6)webpack.dev.conf.js ==> webpack开发环境配置;
7)webpack.prod.conf.js ==> webpack生产环境配置;
-config:项目配置
1)dev.env.js ==> 开发环境变量;
2)index.js ==> 项目配置文件;
3)prod.env.js ==> 生产环境变量;
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
解决vue不能自动打开浏览器的问题:当我们启动项目npm run dev ,开始运行
,命令行提示我们运行成功,但是浏览器没有打开,只能自己手动输入
解决:
1、先安装less依赖: **npm install less less-loader --save **
2、安装成功后,可以在package.json里面看到,多增加了两个模块;
3、然后在vue文件里面编写样式:
写的不好或有错误的地方,接受请教~!
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595