vue工程搭建（含mac电脑操作）

最新推荐文章于 2024-06-12 22:10:45 发布

原创最新推荐文章于 2024-06-12 22:10:45 发布 · 置顶 · 462 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Vue.js和Webpack搭建项目环境，包括安装Vue、配置开发环境、创建项目结构及部署流程等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 搭建（含mac电脑安装）

mkdir vueproject

atom .

环境—————————————————————

1、初始化

npm init -y 生成package.json

2、安装webpack

npm install web pack - -save-dev

一定要加 —save会生成node_modules否则安装不成功

3、安装vue淘宝镜像

npm install -g vue –registry=https://registry.npm.taobao.org

我的是mac电脑，用如下命令

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbo

4、安装vue脚手架

npm install vue-cli -g

mac下命令

sudo npm install -g vue-cli

安装结果

/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue

/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list

/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init

+ vue-cli@2.9.3

added 253 packages in 27.613s

创建——————————————————————————

1、根据模板创建项目

vue init webpack 项目名字<项目名字不能用中文>

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Use ESLint to lint your code? n

pick an eslint preset. 默认Standard

setup unit tests with karma + mocha?No(单元测试不需要)

setup e2e tests with Nightwatch?No(单元测试不需要)

2、进入项目

打开终端

cd 项目名字

安装项目依赖

npm install

3、安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西

npm install vue-router vue-resource - -save

4、启动项目

npm run dev

5、发布项目

npm run build

---------项目创建准备工作

安装vue-router路由用到

cnpm install vue-router --save

终端安装axios，数据用到

cnpm install axios --save

引入axios。修改main.js文件，添加 Vue.prototype.$ajax = axios ，引入axios。

main文件如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'

// Vue.config.productionTip = false
Vue.prototype.$ajax = axios

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render:h => h(App)
// components: { App },
// template: '<App/>'

})

修改config/index.js

useEslint: false,

否则会报各种格式错很麻烦的

src目录下创建 router.js用来路由自己创建的vue

router.js内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1.vue'
import View2 from './views/view2.vue'

Vue.use(Router)

export default new Router({
linkActiveClass:'active',
routes:[
{
path:'/view1',
component:View1
},{
path:'/view2',
component:View2
},{
path:'/*',
component:View1
}

]

})

src下创建views文件夹，在此文件夹下创建新的view1.vue文件

<template id="">
<div class="">
<h1>我是view1</h1>
<a href="#">我是view1</a>
</div>
</template>

<script type="text/javascript">
import axios from 'axios'
// 引入axios，请求服务器数据。axios不支持跨域的jsonp请求
export default {
name:'view1',
mounted: function(){
axios.post('jlb/getslides')
.then(function(response){
console.log(response);
})
.catch(function(response){
console.log(response);
})
}
}

</script>

<style media="screen">

</style>

view2同上，自己写

最后npm start即可