Vue项目学习第一篇
不使用vue-cli构建简单的项目结构本篇文章作为vue项目学习的开始,主要是熟悉项目的编译工作流程,案例灰常简单!1.首先建立如下图的简易目录结构:2.cmd 进入项目目录,也就是vwpro目录执行: npm init (npm是神马???请百度…),因为只是测试,一路回车安装webpack:npm install–save-dev web...
不使用vue-cli构建简单的项目结构
本篇文章作为vue项目学习的开始,主要是熟悉项目的编译工作流程,案例灰常简单!
1.首先建立如下图的简易目录结构:
2.cmd 进入项目目录,也就是vwpro目录
执行: npm init (npm是神马??? 请百度…),因为只是测试,一路回车
安装webpack: npm install –save-dev webpack
安装vue2.0: npm install –save vue
安装babel,编译es6: npm install –save-dev babel-core babel-loader babel-preset-env
解析vue组件和.vue的文件: npm install –save-dev vue-loader vue-template-compiler
解析css: npm install –save-dev css-loader file-loader
3.我们在webpack.congfig.js文件中配置项目
这里是我的配置:
var path = require('path');
module.exports = {
entry:'./src/main.js',//入口文件
//输出
output:{
path:path.resolve(__dirname,'./dist'),
publicPath:'/dist/',
filename:'index.js'
},
module:{
rules:[
//解析vue文件
{test:/\.vue$/,loader:'vue-loader'},
//用babel解析js文件 排除模块安装目录的文件
{test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}
]
}
}
习惯了npm XXX执行指令的方式,在我们的package.json中设置一下启动命令:
"scripts": {
"dev": "webpack"
}
4.编写几个简单页面
APP.vue:
<template>
<div id="app">
<p>{{msg}}</p>
</div>
</template>
<script>
export default{
data(){
return{
msg:'Hello everyone!'
}
}
}
</script>
<style scoped>
*{
color: green;
}
</style>
main.js:
import Vue from 'vue';
import App from './APP.vue';
new Vue({
el:'#app',
render:h=>h(App)
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>
5.执行:npm run dev
ok,这里报错了,没关系,根据报错去修复问题
我这里报错如下:
根据提示,执行指令: npm install webpack-cli -D (-D的意思是在package.json中把它保存为开发依赖;也可以使用–save-dev)
ok,再次执行 npm run dev
好了,我们可以看到生成了dist/index.js文件,在之前的index.html中我们已经引入了此文件.
那么我可以双击执行下index.html打开网页,如下:
好了,小伙伴们,行动起来吧
更多推荐
所有评论(0)