Webpack创建、运行vue.js项目
2017-08-04 15:26
736 查看
项目环境搭建:
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实例并使用需要的插件
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的子组件。
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
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
相关文章推荐
- Webpack创建、运行vue.js项目及其目录结构详解
- Webpack创建、运行vue.js项目及其目录结构详解
- vue-cli创建的项目不需要再创建webpack-config.js文件,因为已经配置过了
- vue.js环境安装及用wepack创建项目
- webpack+vue创建简单项目
- 用npm安装vue和vue-cli,并使用webpack创建项目的方法
- vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)
- 利用webpack打包vue项目后在本地运行资源报404错误
- Vue.js结合vue-router和webpack编写单页路由项目
- vue-cli的webpack模版项目配置解析-build/dev-server.js
- 学习 webpack+vue.js (1、先随便创建一个工程)
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js——60分钟webpack项目模板快速入门【8】
- 命令行运行vue-cli+webpack项目没有自动在浏览器打开
- webpack+vue创建简单项目并整合iview
- vue-cli 新创建的项目启动报错 Module build failed: Error: "extract-text-webpack-plugin"
- vue+webpack项目创建过程
- 用npm安装vue和vue-cli,并使用webpack创建项目
- Vue.js——60分钟webpack项目模板快速入门
- vue+webpack创建项目模板