安装node.js 傻瓜式
安装完毕看版本信息: node -v;
安装cnpm: npm install -g cnpm --registry=http://registry.npm.taobao.org
安装vue-cil : cnpm install -g vue-cli
创建项目:vue init webpack firstVue //firstVue 是名字
写名字啥的:除了必要的其他选no 不然会验证
安装依赖包 :进入文件夹 cnpm install
运行项目:npm run dev
打包项目:npm run build//别忘记将绝对路径改为相对路径 到项目目录下的config
文件夹里的index.js
文件中,将build
对象下的assetsPublicPath
中的“/”
,改为“./”
即可,就在前面加个点就可以了
//一套基本的就完成了
//vue 模块使用
<firstcomponent></firstcomponent> //模块显示
import firstcomponent from './component/first.vue' //引用模块
export default {
name: 'App',
data () {
return {
msg:"this is you new vue App"
}
},
components:{firstcomponent} //载入模块
}
//vue路由使用
//安装路由。在创建项目时会询问
<router-link to="/b">Go to Foo</router-link><!--路由跳转-->
<router-link to="/c">Go to Bar</router-link><!--路由跳转-->
<router-view></router-view><!--路由显示-->
//页面显示结束
import FindBack from '@/component/first'
import AboutUs from '@/component/second'
export default new Router({
routes: [
{
path: '/b',
name: 'FindBack',
component: FindBack
},
{
path: '/c',
name: 'AboutUs',
component: AboutUs
},
]
})
//放入router下的index.js
new Vue({
el: '#app',
router, //放置路由
components: { App },
template: '<App/>'
})
//在main的js里放置路由
//路由结束。。别忘记在main.js和index.js里引用路由。。一般是自动配置好的
//安装sass
cnpm install --save-dev sass-loader//sass-loader依赖于node-sass
cnpm install --save-dev node-sass
// 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
<style lang="scss"> //修改style标签
//方法的使用
methods:{
say: function (message) {
console.log(jsonStr);
console.log(token);
$.ajax({
type: "post",
url: 'http://ap.jvjiewang.com/Seller/Login/dologin',
data: {
jsonStr:jsonStr,
token:token
},
datatype: "json",
success: function (data) {
if(data.status){
console.log(data);
}else{
alert(data.message);
}
},
error:function(){
alert("数据请求失败");
}
});
}
},
//js
<button @click="say('hi')">点我显示样式</button> //html