该笔记建立在vue各个部分都安装完毕的情况下,谨慎参考.
1>.指定项目工作路径
文件路径中的文件名尽量不要用中文,空格,以及其他的通配符.
2>.通过命令行创建项目
使用管理员身份打开命令行窗口,跳转到项目目录下,npm install -g @vue/cli,该过程完成后,继续在目录下输入vue init webpack demo untitled1,接着开始创建项目,如下:
'git' ڲ ⲿ Ҳ ǿ еij
ļ
? Project name untitled1
? Project description A Vue.js project
? Author @liuyu
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "demo".
(乱码了,小问题)
项目建立完毕之后,根据提示依次输入 cd demo npm run dev:
# Project initialization finished!
# ========================
To get started:
cd demo
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
如下所示:
D:\vue workplace\demo>npm run dev
> untitled1@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:15712) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
13% building modules 25/27 modules 2 active ...x=0!D:\vue workplace\demo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 4080ms 13:45:23
I Your application is running here: http://localhost:8080
此处可知项目已经建立成功,接着打开ideal,找到项目建立的位置,打开该项目,接着配置编译环境:
点击edit configurations,跳出页面如下,下拉选择npm,自行设置(和默认的差不多),script要选择dev选项:
配置完毕,接着编写程序可进行编译