前提:nodeJs本地已安装。
1,执行npm安装全球vue-cli,全局安装vue-cli
- - - - -因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。
产生通过配置命令设置默认下载路径:
然后再执行:
2,安装后,检查是否安装成功
vue - V(在此注意V为大写)
3,使用vue建一个项目名叫“我的项目”(vue init webpack我的项目),注意项目名不能有大写。
- - - - -注:vue-cli的模板包括webpack和webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的webpack.config。js中。
——webpack-simple相对简单的,它根目录下才有个webpack.config.js。
4,注意:
项目建立过程中,有如下选择,选择不。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦)。
后两项为单元测试,可以选择不。
5项目建立完成后,目录结构如下:
6,安装项目所需依赖,进入项目中:
完成后,会发现项目目录下多出一个node_modules文件夹,里面就是vue-cli创建的一个基于webpack的vue。js项目。
7,进入项目目录文件夹(我的项目)中,就可以使用vue进行开发啦
8、使用npm dev运行,便可以打开本地服务器实时查看效果(localhost: 8080)
如果浏览器打开之后,没有加载出页面,有可能是本地的8080端口被占用,需要修改一下配置文件config> index.js
建议将端口号改为不常用的端口。另外我还将建造的路径前缀修改为“。/?原本为“/?,是因为打包之后,外部引入js和css文件时,如果路径以'/'开的头,在本地是无法找到对应文件的(服务器上没问题),所以如果需要在本地打开打包后的文件,就得修改文件路径。
9日初始效果
10,退出监听,可以直接Ctrl + C,选择y .
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
