搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧。(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的。。。。。。)

1& 安装node.js (安装网址点击下面链接)

node.js下载网址

安装完以后桌面上什么都没有是不是有点慌啊!不急,你先打开Dos窗口,输入以下命令,

如果界面如下:(恭喜你)

也有可能失败,失败的原因可能是系统权限,目前还没有找到最好的解决办法。。。。。

Node.js是个啥人家首页都写着呢,俺就不给你解释了哈。

 

2&安装vue的脚手架

全局安装vue-cil,也就是所谓的脚手架(不要觉得有什么高大尚的也就是如此而已)

1)用npm安装(国际开源库生态系统)

2)用cnpm安装(使用国内镜像安装)

你先用淘宝镜像安装cnpm才可以使用哦

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

检查是否安装上(cnpm -v)

2. 用cnpm安装vue脚手架

cnpm install -g vue-cli

最后检查自己是否安装上:(vue -V)记住这里的-V是大写字母V,出不来可不要懒我,我可不会管你

特别注意:

1.如果提示“无法识别”,有可能是npm的版本过低。

解决办法:npm install -g npm(更新一下版本就好了)。

2. 如果安装失败的话。

解决办法:npm cache clean(清除一下缓存就好了)

 

3&生成项目

首先需要用cd指令进入项目目录进行搭建项目的文件夹

 

配置完成以后,可以看到目录下多出一个项目文件夹,里面就是vue-cli创建的一个局域webpack的vue.js项目。

然后进入项目目录下:cd mai

上面脚手架给我们把常用的插件都下载并且配置起来,比方说路由、以及es6转成es5的插件。

在做项目的过程我们常常用到数据的传输和各个组件的管理,所以接下来我们还需要安装一些插件:

 

安装vue-resource是用于ajax请求的vue插件 用来和服务器端进行数据通信

npm install vue-resource --save

安装vuex是用于管理每个组件之间的状态值的改变

npm install vuex --save

点击打开链接(vuex的介绍和使用)

记住以上两个必须安装在项目里哦,忘记了小姐姐可不会负责哦(没事,错了就重新来一遍呗)。

npm install(这样就完成了)

最后就是启动项目了(就问一句激不激动小伙伴们)

npm run dev

出现这个页面就算是大功告成了(在浏览器上输入localhost:8080就可以打开如下界面)

(可以开始写项目了。。。。。。)

特别注意:

如果浏览页面打不开或者是没有加载页面,有可能是本地8080端口被占用,又或者是你关闭了这个窗口。

解决办法:

针对第一种情况:修改配置文件就好了

打开项目找到config>index.js

建议将端口号改为不常用的端口(例如:8075 8081等等端口,一般情况默认的端口号是8080)。

对于第二种情况:重启一下JavaScript的运行环境就好了,至于怎么启动我就不说了。

 

4&打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看,项目上线时,只需要将 dist 文件夹放到服务器就行了。

导入文件以后,其文件组织结构如下所示:

各个文件夹的含义如下:

 

|-- build            // 项目构建(webpack)相关代码

|   |-- build.js         // 生产环境构建代码

|   |-- check-version.js      // 检查node、npm等版本

|   |-- dev-client.js        // 热重载相关

|   |-- dev-server.js         // 构建本地服务器

|   |-- utils.js             // 构建工具相关

|   |-- webpack.base.conf.js     // webpack基础配置

|   |-- webpack.dev.conf.js      // webpack开发环境配置

|   |-- webpack.prod.conf.js     // webpack生产环境配置

|-- config           // 项目开发环境配置

|   |-- dev.env.js    // 开发环境变量

|   |-- index.js     // 项目一些配置变量

|   |-- prod.env.js   // 生产环境变量

|   |-- test.env.js   // 测试环境变量

|-- src           // 源码目录

|   |-- components    // vue公共组件

|   |-- store        // vuex的状态管理

|   |-- App.vue       // 页面入口文件

|   |-- main.js       // 程序入口文件,加载各种公共组件

|-- static            // 静态文件,比如一些图片,json数据等

|   |-- data        // 群聊分析得到的数据用于数据可视化

|-- .babelrc           // ES6语法编译配置

|-- .editorconfig      // 定义代码格式

|-- .gitignore        // git上传需要忽略的文件格式

|-- README.md       // 项目说明

|-- favicon.ico

|-- index.html      // 入口页面

|-- package.json    // 项目基本信息

 

 

最后来一个撩人小技能(得跟有好感的男盆友玩才有意思):

女:我们两个有几条腿?

男:4条腿

女:不对不对

男:??

女:一条腿,他们都说我们有一腿

(如果你的男盆友不安套路出牌的话我也没有办法了)

Logo

前往低代码交流专区

更多推荐