从零搭建一个完整的vue的项目-CSDN博客

碎碎念————记得刚开始用vue的时候手忙脚乱，也不知道干什么好，一步一步试着才走过来，这次重新写了个新功能，就顺便写个算是完整一点的过程，仅供刚入门的一个参考吧，有个大概的了解

正文————

三步使用vue-cli快速搭建一个项目

首先确保自己安装了node环境,可以使用npm

检查node版本:在cmd中输入
```
 node -v
复制代码
```
检查npm版本:在cmd中输入
```
node -v
复制代码
```

然后,开始真正的创建项目了

全局安装vue-cli
```
   npm i vue-cli -g`
复制代码
```

安装完成后,进入到自己的文件夹,当然,你cd进去也好,鼠标点进去也好,这个不重要.进去就行.

使用命令开始初始化创建自己的项目了.

 vue init webpack test
复制代码

(这个test就是你自己的想要创建的项目名字)

 ? Project name (exprice) ---------------------项目名称

  ? Project description (A Vue.js project)-----------项目描述

 ? Author Datura --------------------- 项目创建者

 ? Install vue-router? Yes

 ? Use ESLint to lint your code? (Y/n) no ---------------------是否启用eslint检测规则，这里个人建议选no

 ? Setup unit tests with Karma + Mocha? (Y/n) no

 ? Setup e2e tests with Nightwatch? (Y/n) no

 vue-cli · Generated "test".
 To get started: ----------- 这里说明如何启动这个服务
 cd exprice
 npm install
 npm run dev
复制代码

ok,当你看见这个样子的时候,安装成功,根据上面提示的命令,继续往下,进入新建的项目,cd进去

最后跑起来,大功告成.

可以去看看自己的目录结构了.

(话说其实我都是有截图的，不过时间太长清理电脑了就没了，我又懒得在截一边，就文字了，感觉还是挺清晰的，毕竟是很久之前写的在电脑里存着没发的)

然后到这里，是一个官方的实例可以跑起来了，但是，如果新人的话可能还是会有点迷茫，从哪下手啊。不慌，还有下文

1.在src下面建文件夹 <建立你文件所需要的对应的目录结构> 我的

2.然后在router——index.js中配置路由

    import Vue from 'vue'

    import Router from 'vue-router'
    import Home from '@/views/home/index.vue'
    
    Vue.use(Router)

    export default new Router({
    routes: [{
    path: '/',
    name: 'Invite',
    component: Invite
    },
    {
     path: '/invite',
    name: 'Invite',
    component: Invite
    }]
    })
发一个意思意思版本的，我的index.js(片段，重点在步骤)
复制代码

2.vue中放内容测试页面之间跳转

基本到这里是可以了，往里面放自己的内容就好了

3.补充：如果缺少什么可以在按着提示对应安装一下比如我的莫名缺少了css-loader style-loader vue-style-loader 然后npm i css-loader style-loader vue-style-loader -s安装就可以了

我用的编辑器是vs code 然后当npm start为了让浏览器自己打开，可以按下面配置一下

pack.json中dev加--open "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",

不过有一点小烦的是每次打开项目都会自己打开。。。