1.Node.js的安装
Vue环境运行依赖Node.js,首先安装Node.js.Node.js的官方网站https://nodejs.org/en/download/,选择对应的版本下载,本文的环境为Windows 64位,选择Windows Installer(.msi) 64安装,按照提示安装即可。安装结束可输入 node -v 查看版本。
2. npm的安装。
安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下输入 npm -v 查看版本,我的安装目录是D:\nodejs
3.安装vue-cli
在安装vue-cli 之前建议先把nodejs 和npm的版本更新到最新版本,nodejs的版本直接去官网下载最新的安装就行了,(或者1.先清缓存 npm cache clean -f 2.安装n模块npm install -g n --force 3.进入安装目录查看安装版本 node -v),npm的最新版本可以先进去nodejs的安装目录,然后执行npm install [email protected] -g 就可以把npm更新到最新的版本。然后用 npm -v 查看是否是最新版本
最后执行npm install --global vue-cli 安装vue-cli,安装完成用 vue -V 查看版本 ,注意-V是要大写的。(更新vue-cli 请参考https://cli.vuejs.org/zh/guide/installation.html和https://www.jianshu.com/p/8cf4b0dea0d0)
出现图中的警告可以不管它,让它安装完就可以查看安装版本了。
4.创建应用
在合适的地方创建文件根目录,我的是在F盘目录下创建一个保存vue
项目的文件夹F:\VueProject,然后进入该目录 执行vue init webpack my_second_project 命令创建项目 ,我的项目叫my_second_project
然后就是输入一下项目的相关信息。
途中框起来的尽量填写No , 注意:项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,可以避免不必要的麻烦)
创建完项目后会提示是否执行npm ,系统会自动执行
等待它执行完毕
见到这句话就证明创建成功了。
接着进入创建的项目根目录,cd my_first_project,其实现在的安装已经很智能了,cmd都会提示你怎么做
相继执行上面的操作就可以,其实第一个就是进入项目目录,第二个就是把项目执行在生产环境启动项目
启动完项目就可以在http://localhost:8080 路径下查看我们新建的项目内容了
按着Ctrl + c 就会出现上面的内容,意思是是否终止操作
5.如何启动一个已经创建的项目
进入项目的父目录,也就是创建项目的时候保存项目的父目录,在上面中我们创建的项目的父目录是F:\VueProject ,所以我们进去到这个目录,然后执行 npm install,npm install 命令的作用就是打包项目。
执行完毕在进入项目F:\VueProject>cd my_first_project
再执行npm run dev
最后就可以打开浏览器查看了
相关技术方案:
错误信息:http://www.javashuo.com/article/p-bfsmghgi-bs.html
WebStorm启动vue:
https://blog.csdn.net/Dora_5537/article/details/87921443