Webpack创建、运行vue.js项目
来源:互联网 发布:淘宝旗舰店有假货吗 编辑:程序博客网 时间:2024/06/05 02:23
项目环境搭建:
1.安装node
点击下面链接进行下载:
node官网 https://nodejs.org/en/
版本查看:
运行命令行 cmd,然后输入 node -v 查看node版本:
注意:node版本最好新一点好,推荐6.0以上。
2.全局安装vue-cli
在命令行输入:
npm install-g vue-cli
3.创建一个基于 “webpack” 模板的新项目
vue init webpack project-name(默认安装2.0版本)
vue init webpack#1.0 project-name(安装1.0版本)
项目目录结构:
- main.js 是我们的入口文件,主要作用是初始化vue实例并使用需要的插件
import Vue from 'vue'import App from './App'/* eslint-disable no-new */new Vue({ el: '#app', template: '<App/>', components: { App }})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div></template><script>import Hello from './components/Hello'export default { name: 'app', components: { Hello }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
index.html文件入口
src放置组件和入口文件
node_modules为依赖的模块
config中配置了路径端口值等
build中配置了webpack的基本配置、开发环境配置、生产环境配置等
运行项目:
1.cd project-name
2.npm install
3.npm run dev
4.在浏览器输入localhost:8080
阅读全文
0 0
- Webpack创建、运行vue.js项目
- Webpack创建、运行vue.js项目及其目录结构详解
- Webpack创建、运行vue.js项目及其目录结构详解
- webpack+vue创建简单项目
- webpack+vue创建简单项目
- vue+webpack项目创建过程
- webpack+vue创建简单项目
- vue.js创建项目
- 创建Vue.js 项目
- vue.js创建项目
- 构建基于webpack的vue.js项目
- express+webpack+vue.js项目搭建
- 【vue】webpack打包vue项目并且运行在Tomcat里面
- webpack + vue.js + vue route
- webpack+vue.js 搭建
- Vue.js Webpack warning
- vue+webpack项目实战
- Vue +webpack 项目
- HDU6077 思维(水)
- Java web项目Linux下部署的中文乱码问题
- JAVA多态的理解
- Android学习笔记 Lambda for Android
- 指针与数组的基础知识分析
- Webpack创建、运行vue.js项目
- LightOJ 1422 Halloween Costumes(区间DP)
- 修改Hibernate源码实现建表时字段和Entity里定义的fields顺序一致
- 简简单单进行pdf转cad操作
- 解决 'boost/iterator/iterator_adaptor.hpp' file not found’ 及控制台":CFBundleIdentifier", Does Not Exist
- RabbitMQ防止消息丢失
- Matching Balanced Constructs with .NET Regular Expressions
- AndroidStudio 中报错原因'Theme.AppCompat.Light' 'showAsAction' Android Failed to load dx.jar或者***.jar
- Python的os.path模块